阵列对象上的反应图

Question

所以我对React东西很陌生，我正在尝试的是使用.map（）生成一些动态东西。

这是我的组件：

import React, { Component } from "react";

class DinamycStuff extends Component {
  state = {
    options: [
      { id: 1, optionOne: "OptionOne" },
      { id: 2, optionTwo: "OptionTwo" },
      { id: 3, optionThree: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];

    return (
      <>
      {options.map((option) => {
        return {option}
      })}
        <span>{options.optionOne}</span>
        <span>{options.optionTwo}</span>
        <span>{options.optionThree}</span>
      </>
    );
  }
}

export default DinamycStuff;
我在这里做错什么，为什么地图没有产生预期的结果？

所以我对React东西很陌生，我正在尝试使用.map（）生成一些动态的东西，这是我的组件：import React，{Component} from“ react”; DinamycStuff类扩展...

Answer 1

可以吗？

Answer 2

您的选项对象错误。我们需要对数组中的所有对象都具有相同的属性。

Answer 3

此处使用的映射实际上是将js对象转换为react元素，但是映射转换后，此处的用法仍然是js对象。反应元素可以是[CO]。如果您的地图中的返回值后面有一个react元素，那是正确的。

Answer 4

您需要映射并返回HTML元素

Answer 5

您应该做类似的事情