は動的に私はコンポーネントは、このようなものになります持っている特定の順序でコンポーネントを反応させるのに

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

あなたのコードが動作しない主な理由は、あなたがの配列を作成しているということである要素に反応との配列として扱うには、コンポーネントを反応します。あなたが

を行うと

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

が反応がNewImagePlacementが反応成分であることを期待し（通常はクラスや「DIV」または「入力」のような文字列。ただし、作成された配列の内容は、要素に反応あなたがやったところからより良いelementToUseという名前になりcomponentToUse（基本的には、コンポーネントのプラス小道具はあなたの要素を与える：。

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

だから、あなたの代わりにこれを行う必要があります。

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

を10

を使用して、レンダリングに要素を含めます。

P.S.キーがアンチパターンであるとして、配列のインデックスを使用すると、アレイは再オーダーをすることができた場合 - ドキュメントを反応させるのがこのビットを参照してください（https://facebook.github.io/react/docs/lists-and-keys.html）

PPS Array.map()の使用は非常に奇妙である - map()を作成することであることの通常のポイント新しい配列が、あなたはそれをしません。代わりに、混乱を避けるために.forEach()を使用してください。

Answer 2

を使用すると、positionプロパティを持つオブジェクトの配列を持っている場合は、単にそのプロパティで配列をソートし、あなたがそれを行うためのアルゴリズムのためのシャッフルチェックHow can I shuffle an array?をしたい場合は、あなたのコンポーネント

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 />) 

にマップされます。

あなたがシャッフルが、「リング」としてそれらをシフトしていない場合ので、あなただけの

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

shift_ring(imageComponents, 3)