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代码周围使用花括号。

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

4 个答案: