Question

我有一个组件看起来像这样：

<ImageComponent
    image={this.props.data.image1}
/>
<ImageComponent
    image={this.props.data.image2}
/>
<ImageComponent
    image={this.props.data.image3}
/>

我要做的是根据我之前拥有的数据，以动态顺序渲染此组件，其中包含多个图像。

[{
    img: image1,
    placementIndex: 2
},
{
    img: image2,
    placementIndex: 0
}
{
    img: image3,
    placementIndex: 1
}]

我不认为我尝试的方式非常有效

const imageComponentPlacement = [];
this.props.componentOrder.map((placement) => {
    const componentToUse = (<ImageComponent
        image={this.props.data[placement.img]}              
    />);
    imageComponentPlacement.splice(placement.placementIndex, 0, componentToUse);
}

return imageComponentPlacement.map((NewImagePlacement, index) =>
    <div key={index}>
        <NewImagePlacement />
    </div>
);

这就是我尝试过的方法，但似乎无法让它发挥作用。我收到错误Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

将组件推送到阵列是一个问题然后尝试渲染数组？不太确定从哪里开始。谢谢！

Answer 1

您的代码不起作用的主要原因是您正在创建 React元素的数组，并将它们视为 React组件的数组。当你这样做

<div key={index}>
    <NewImagePlacement />
</div>

React希望NewImagePlacement成为一个React组件（通常是类或字符串，如“div”或“input”。但是，数组的内容是创建React元素的，你从那里componentToUse（其中）会更好地命名elementToUse。基本上，组件加道具会给你一个元素：

const myElement = <Component prop="my-prop" />;

所以你应该这样做：

<div key={index}>
    { NewImagePlacement }
</div>

将元素包含在渲染中。

P.S。如果数组可以重新排序，则使用数组索引作为键是反模式 - 请参阅React文档（https://facebook.github.io/react/docs/lists-and-keys.html）

P.P.S你对Array.map()的使用非常奇怪 - 通常做map()的目的是创建一个新数组，但你不这样做。也许使用.forEach()来避免混淆！

Answer 2

如果您的数组包含具有position属性的对象，则只需按该属性对数组进行排序，然后映射到您的组件

images = [{
  img: image1,
  placementIndex: 2
 },
 {
  img: image2,
  placementIndex: 0
  },
{
img: image3,
placementIndex: 1
}]

mages.sort((a,b) => a.placementIndex - b.placementIndex)
     .map(a=><ImageComponent ...a />)

如果你想对算法进行随机检查How can I shuffle an array?。

所以你最终会得到

imageComponents.shuffle(); // see linked question for implementation

如果你不想洗牌，而是将它们转换为＆＃34; ring＆＃34;只做转移和连接

function shift_ring(components, n) {
  n = n % components.length
  return components.slice(n).concat(a.slice(0,n-1))
}

shift_ring(imageComponents, 3)

以特定顺序动态渲染反应组件

2 个答案: