React.JS 无法添加 html 标签 [重复]答案

【问题标题】：React.JS can't add html tags [duplicate]React.JS 无法添加 html 标签 [重复]
【发布时间】：2019-01-12 20:58:12
【问题描述】：

我是新来的反应，并试图理解为什么我不能在我的渲染方法中添加 HTML 标记

render() {
  return (
    <div className="App">
      My App
      <Projects projects={this.state.projects}/>
    </div>
  );
}

render() {
  return (
    <div className="App">
      My App
      <Projects projects={this.state.projects}/>
    </div>
    <h1> hello world </h1>
  );
}

这是怎么工作的，但如果我将</h1> hello world </h1> 添加到函数中，它将不再工作？

【问题讨论】：

</h1>hello world</h1> 以结束标签开头； <h1>hello world</h1> 是正确的表示法......虽然它需要驻留在 <div> 中，以便返回单个节点。

标签： reactjs

【解决方案1】：

渲染函数只能返回一个 HTML 标记，因此您应该将所有标记都包含在一个 div 上

render() {
  return (
    <div className="App">
      My App
      <Projects projects={this.state.projects}/>
      <h1> hello world </h1>
    </div>
  );
}

【讨论】：

【解决方案2】：

使用片段。 React 中的一个常见模式是组件返回多个元素。片段让您可以对子列表进行分组，而无需向 DOM 添加额外的节点。 https://reactjs.org/docs/fragments.html

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

【讨论】：