Question

我是新来的反应者，试图理解为什么我不能在渲染方法中添加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>，它将不再起作用？

Answer 1

渲染功能只能返回一个HTML标记，因此您应在一个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>
  );
}

React.JS无法添加html标签

2 个答案: