React.JS无法添加html标记[重复]

Question

我是新来的反应，并试图理解为什么我不能添加超文本标记语言到我的渲染方法

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

如果我添加




Answer 1

渲染函数只能返回一个超文本标记语言标记，因此您应该在一个div中包含所有标记，例如

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

Answer 2

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

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