javascript - 返回并渲染 JSX

Question

我有以下函数，它将 JSX 添加到变量标记。但是，当调用该函数时，标记将呈现为纯文本而不是 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添加动态值。