返回并渲染 JSX

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>
 }