Question

我有一个充满组件的数组，名为＆＃34; componentPack＆＃34;。我试图弄清楚如何基于数组中的索引来渲染某个组件。给我带来麻烦的部分是在JSX中渲染组件。为了解决这个问题，我正在使用一个名为＆＃34; stager＆＃34;的中间数组。我将一个组件推送到，然后映射：

var comp = stager.map((Component) => {
  return <Component />;
});

无论如何直接从原始数组中选择一个组件？

类似的东西：

var comp = () => {return <{componentPack[3][2]} />;}

我觉得我并不真正了解JSX在这种情况下的工作原理。非常感谢任何帮助。

Answer 1

您可以直接引用jsx对象。例如，如果componentPack是一个组件数组，如下所示：

const componentPack = [1, 2, 3, 4, 5].map((item) =>
  <Component/>
);

您可以引用任何单个元素并获取特定组件，如：

render(){
  return componentPack[2] //Will return the third Component
}

Answer 2

您可以选择地图组件中的条件渲染，例如

var index = 3;
const component = componentPack.map((Component, idx) => {
    if(idx === index) {
         return <Component/>
    } else {
         return null;
    }
})

那么你可以像

一样呈现它

render() {
    return (<div>{component}</div>);
}

React.js：如何从数组中渲染单个组件？

2 个答案: