reactjs - A-frame-react：.map() 时如何传递值？

Question

我希望为数组中动态添加的每个项目生成一个实体。

有可能这样做吗？我如何将每个项目的值归因于每个 Entity ？

this.state = {
    items: []
}

然后在渲染中：

    <Scene>
      {this.state.items.map((item, key) => {
        return (
            <Entity />
         )
        }
       )}
     </Scene>

Answer 1

您可以映射items组件状态并将item字符串提供给组件的text道具Entity。

例子

class VRScene extends React.Component {
  state = {
    items: ["lemon", "orange"]
  };

  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => {
        return { items: [...prevState.items, Math.random()] };
      });
    }, 2000);
  }

  render() {
    return (
      <Scene>
        {this.state.items.map((item, index) => (
          <Entity
            key={item}
            text={{ value: item, align: "center" }}
            position={{ x: 0, y: 2 - index * 0.1, z: -1 }}
          />
        ))}
      </Scene>
    );
  }
}