我希望为数组中动态添加的每个项目生成一个实体。
有可能这样做吗?我如何将每个项目的值归因于每个 Entity ?
this.state = {
items: []
}
然后在渲染中:
<Scene>
{this.state.items.map((item, key) => {
return (
<Entity />
)
}
)}
</Scene>
我希望为数组中动态添加的每个项目生成一个实体。
有可能这样做吗?我如何将每个项目的值归因于每个 Entity ?
this.state = {
items: []
}
然后在渲染中:
<Scene>
{this.state.items.map((item, key) => {
return (
<Entity />
)
}
)}
</Scene>
您可以映射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>
);
}
}