Question

我有以下函数，它将JSX添加到变量markup中。但是，当调用该函数时，标记将呈现为纯文本而不是JSX。如何将字符串呈现为JSX而不是纯文本？

函数调用：

<FormGroup controlId="items">
    {this.renderItems()}
</FormGroup>

renderItems() ：

renderItems() {
    let content = this.state.content;
    console.log(content);
    let markup = "<ul>";
    for (const [key, value] of Object.entries(content)) {
        if (value) {
            markup += "<li><Checkbox checked>" + key + "</Checkbox></li>"
        }
        else {
            markup += "<li><Checkbox>" + key + "</Checkbox></li>"
        }
    }
    markup += "</ul>";

    return (markup);
}

Answer 1

问题是您没有创建JSX元素。您只是在创建字符串。一种实现此目的的方法是

renderItems() {
  let content = this.state.content;
  return (
    <ul>
      {Object.entries(content).map(([key, value]) => (
        <li>
          <Checkbox checked={!!value}>{key}</Checkbox>
        </li>
      ))}
    </ul>
  );
}

在这里，我们使用JSX Expressions添加动态值。

Answer 2

您的标记是字符串而不是JSX

尝试一下

 renderItems() {
    let content = this.state.content;
    let markup=[]
    console.log(content);
    markup.push(<ul>);
    for (const [key, value] of Object.entries(content)) {
        if (value) {
            markup.push(<li><Checkbox checked={true}>{ key }</Checkbox></li>)
        }
        else {
            markup.push(<li><Checkbox checked={false}>{key}</Checkbox></li>)
        }
    }
    markup.push(</ul>);

    return (markup);
}

Answer 3

尝试一下。问题是您将ul和li作为字符串追加，因此它们将被视为字符串，而不是jsx。

由于内容是对象的数组，因此您可以使用.map进行迭代，您将获得li元素的新数组。通过封装ul元素返回数组。

此外，在循环返回jsx元素时，您永远都不要忘记添加键。键应该是唯一的，如果不使用索引作为键，建议的方法是从数据中添加键

 renderItems() {
     const { content } = this.state;
    const items = content.map((item, index) => (
            <li key={index}><Checkbox checked={item.value ? true : false }>{item.value}</Checkbox></li>
     )
    return <ul>{items}</ul>
 }

返回并渲染JSX

3 个答案: