Javascript 将ReactJS填充到多个div'；s代替了李

编写我的第一个ReactJS应用程序，我需要它做的是创建几个div，其中包含一些虚拟内容，稍后我将使用从站点获取的真实内容进行更新

到目前为止，这是我为实现这一点而编写的代码

class Joke extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      jokes: [],
    };
  }

  render() {
    //test content
    let jokes = ['first joke', 'second joke', 'third joke'];

    const jokes_div = jokes.map((joke) => {
        return (
            <div className="card col-md-7">
              <div className="card-body">
                 {joke}
              </div>
            </div>
        );
    });

    return (
        <div className="main-card-body">
            {jokes_div}
        </div>
        
    );
  }
}

// ========================================

ReactDOM.render(
  <Joke />,
  document.getElementById('jokes')
);

---

首先，现在不需要调用构造函数。这篇文章写得不错

代码看起来不错，但列表中的外部div中没有“key”属性。 您需要将其包含在内，因为react会抛出错误。这需要是唯一的值，例如元素的索引。

我在这里准备了一个工作示例，所以您可以将其与代码进行比较。

核心部分如下所示：

 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    const jokes_div = jokes.map((item, i) => (
      <div key={i}>
        <p>{item}</p>
      </div>
    ));
    return <div className="App">{jokes_div}</div>;
  }
}

类应用程序扩展组件{
render（）{
常量笑话=[“第一”、“第二”、“第三”]；
const jokes\u div=jokes.map（（项目，i）=>(
{item}

));
返回{lakes_div}；
}
}

您还可以对此稍加改进，并在返回中调用它：

 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    return (
      <div className="App">
        {jokes.map((item, i) => (
          <div key={i}>
            <p>{item}</p>
          </div>
        ))}
      </div>
    );
  }
}

类应用程序扩展组件{
render（）{
常量笑话=[“第一”、“第二”、“第三”]；
返回(
{笑话.地图（（项目，i）=>(
{item}

))}
);
}
}

您收到了什么类型的错误？显示您的HTML文件，并在笑话类文件中导入react和react组件？您的代码工作正常：。您唯一缺少的是—您没有定义

的键—但这只是警告，没有其他错误。我想您忘记了定义它所说的

错误。回顾你的代码，检查你是否在某个地方留下了
错误
单词而没有定义它。是的。您的错误与文件中的代码无关。不过，这并不是它抛出该错误的原因。例如，他的代码非常好。是的，这看起来像是一些构建错误。你把一切都安排好了吗？例如，在您的示例中没有react导入。您始终可以使用create react app设置项目，因为我正在使用一些预编译的react，我还需要使用
react.Component
，而不是单独使用
Component
。否则，我不确定bug在哪里，但这是可行的。
 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    return (
      <div className="App">
        {jokes.map((item, i) => (
          <div key={i}>
            <p>{item}</p>
          </div>
        ))}
      </div>
    );
  }
}