为什么运行此代码时没有出现 h1？ [复制]

Question

我有以下 React 渲染函数：

render() {
  return (
    <h1>Post list</h1>,
    this.state.posts_data.map(p =>
      <div key={p.id}>
        {p.title} , {p.id} , {p.userId}
      </div>
    )
  );
}

为什么运行代码时没有出现h1？

Answer 1

您只能返回 1 个元素，在您的情况下，您有 2 个选项，您可以将所有元素包装在一个 <div> 中，如下所示：

render() {
  return (
    <div>
      <h1>Post list</h1>,
      {this.state.posts_data.map(p =>
        <div key={p.id}>
          {p.title} , {p.id} , {p.userId}
        </div>
      }
    </div>
  );
}

或者你可以使用<React.Fragment />。

render() {
  return (
    <React.Fragment>
      <h1>Post list</h1>,
      {this.state.posts_data.map(p =>
        <div key={p.id}>
          {p.title} , {p.id} , {p.userId}
        </div>
      }
    </React.Fragment>
  );
}

注意：在 React 中我们使用 JSX，因此如果您想在 HTML 中使用 Javascript，您必须将其包装在 { } 中，这就是我将您的 this.state.posts_data.map() 包装在这些括号中的原因。

确保this.state.posts_data 是一个数组，否则会引发错误。

Answer 2

我用数组概念重写了代码，问题解决了

 render() {
        return (
               [
                <h1>Post list</h1>,
                this.state.posts_data.map(p =>
                <div key={p.id}>
                    {p.title} , {p.id} , {p.userId}
                </div>
                )
               ]
        );

    }

Answer 3

您必须将两个元素都包装在一个标签中。渲染只能返回一个。

Answer 4

我修改了你的代码。

render() { 
    return ( 
        [
            <h1>Post list</h1>, 
            this.state.posts_data.map(p => (
                  <div key={p.id}> 
                      {p.title} , {p.id} , {p.userId} 
                  </div>
               ) 
            )
        ]
    );
}

当您有多个元素但不希望它们包装在单个父节点中时，您需要将它们推送到数组中。 您还需要在 jsx 中的 js 代码周围使用花括号。