当前位置: 首页 > 面试题库 >

如何在react render函数中创建动态href?

栾英资
2023-03-14
问题内容

我正在渲染帖子列表。对于每个帖子,我想呈现一个带有帖子ID的锚标记,作为href字符串的一部分。

render: function(){
    return (
        <ul>
            {
                this.props.posts.map(function(post){
                    return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li>
                })
            }
        </ul>
    );

我该如何做,以便每个帖子都具有href的/posts/1/posts/2等等?


问题答案:

使用字符串串联:

href={'/posts/' + post.id}

JSX语法允许使用字符串或表达式({...})作为值。您不能将两者混用。顾名思义,您可以在表达式内部使用任何JavaScript表达式来计算值。



 类似资料:
  • 我想让我的子组件有一个ref,但是我不希望用户在创建组件时必须指定ref。所以说我有这样的东西: 我希望父组件能够访问子组件的状态。最简单的方法是为每个组件添加一个ref,但我希望这是在函数中完成的,以便从最终用户那里抽象出它,因为我希望这些组件被通用化。 有没有一种干净的方法可以让父组件访问子组件的状态,例如当创建子组件时,您有以下内容: 因此,在父类内部,我可以执行以下操作: 因此,我希望能够

  • 问题内容: 我有这样的按钮 还有这个 上面的代码工作正常,但我想使其动态化。 所以我像下面这样改变它。 这行不通,我不知道为什么,尽管如果我检查元素,上面的代码会生成如前所述的正确代码。 问题答案: 括号符号的使用: 指向当前作用域对象,因此您可以通过变量名称访问方法。

  • 问题内容: 我想动态创建一个二维数组。 我知道列数。但是行数正在动态更改。我尝试了数组列表,但它仅将值存储在单个维度中。我能做什么? 问题答案: 由于列的数量是恒定的,你可以有一个的。 由于它以a 为后缀,因此行数可以动态增加和减少。每行都有一个,它是静态的,但是您说列数是固定的,因此这不是问题。

  • 我试图从云函数动态地为集合中的文档创建集合和子集合,但我遇到了以下异常** 参数“CollectionPath”必须指向集合,但为“Data/C2F7C4E84366”。您的路径不包含奇数个组件 ** 原木- 错误:参数“documentpath”必须指向一个文档,但它是“exports/user343434_inbox/profile”。您的路径不包含偶数个组件。在firestore.doc(/

  • 我正在用android创建一款纸牌游戏(21点)。前两张卡是easy card1和card2,但是我想按一下“点击我”按钮,发一张新卡,并将其分配给card3、card4等。有没有任何方法可以做到这一点,而无需创建所需的最大变量数,并使用if-then语句检查它们是否被分配了值?

  • 我正在将java脚本移动到dart,在java脚本中我创建了动态变量,例如 我怎么能用飞镖呢?