web-dev-qa-db-ja.com

Reactコンポーネントの配列をレンダリング

簡単な質問。誰もがコンポーネントの配列をレンダリングする方法を知っていますか？開発者が特定のコンポーネントを簡単に変更できるようにしようとしています。 （ダッシュボードのようなものです）。

コンポーネントリストファイル

import React from 'react';
export default [
    <ComponentOne/>
    <ComponentTwo/>
];

ダッシュボードコンポーネント

import React from 'react';

import components from './../../components';

export default class Dashboard extends React.Component 
{
    render = () => {
        //Want to render the array of components here.
        return (
            <div className="tile is-parent">
                {components}
            </div>
        );
    };
}

問題は、キーを追加する必要があるコンポーネントの配列があることです。しかしながら！コンポーネントにキーを追加することもできないようです。本当に説明する方法がわからないので、試したコードを次に示します。

{components.map((component, key) => (
    <component key={key}/>
}

上記を行うと、「キーを適用する必要があります」というエラーは表示されませんが、何も表示されませんか？そして、「コンポーネント」が存在しないか、それらの線に沿って奇妙な何かがあるためだと推測しています。

私も試してみましたcomponent.key = key;しかし、どうやらこのタイプのオブジェクトでそれをさせてくれないのでしょうか？

私のフォールバックは、配列の代わりに省略形の関数を返すことですが、何らかの理由で配列が好きですか？後輩の方が簡単そうです。

arraysreactjs
11
sourRaspberri

新しい React Fragments の使用を検討しましたか？ （v16）

これは、配列/キー全体の問題を回避するのと同じように、最も簡単なソリューションです。

キーを渡す必要がある場合は、コンポーネントがキーを持っていることを単に要求することをお勧めします。これがReactの仕組みです。したがって、予測できないインターフェイスの背後にこの動作を隠すことはお勧めしません。

本当にこれを行う必要がある場合は、 React.cloneElement 要素を複製し、新しいプロパティを挿入します。

React.cloneElement(element, { key: 'foo' });
5
Simon Boudrias

コンポーネントファイル内のすべてのコンポーネントを常にレンダリングする場合は、おそらくReact.Fragmentsタグでラップする方が良いでしょう。

ベストプラクティスは、これを定数としてではなく、コンポーネントを返す単純な関数としてエクスポートすることです。

そう...

const Components = props => {
  return (
    <React.Fragment>

      <ComponentOne\>
      <ComponentTwo\>

    <\React.Fragment>
  )
}

export default Components

これにより、複数のコンポーネントを含むDOM要素なしで、複数のコンポーネントを隣り合わせに配置できます。

その後、通常のコンポーネントとして使用することでレンダリングできるようになり、すべてをレンダリングできるので、インポートするだけです...

<Components \>

それ以外の場合、それらを配列のように扱いたい場合、インポートしたReactオブジェクトで...

React.Children.toArray(arrayOfComponents)

（元の質問のように）コンポーネントの配列を渡すと、必要に応じて並べ替えてスライスすることができ、レンダリング関数の戻り値でドロップすることができるはずです

5
Matt Wills

私のコメントをフォローアップすると、代わりにこれを行う必要があります：

{components.map((component, index) => (
    <span key={index}>
        { component }
    </span>
}

React 16では、React.Fragment：

{components.map((component, index) => (
    <React.Fragment key={index}>
        { component }
    </React.Fragment>
}
2
John Kennedy

これらの答えはすべてほぼ正しいです。エクスポートから_<../>_を削除するだけです：

_export default [ ComponentOne, ComponentTwo, ]_

そして、他のファイルでは.map()を使用します：

_export default class Dashboard extends React.Component {
    render = () => (
        <div className="tile is-parent">
            {components.map((Component, key) => (<Component key={key} />))}
        </div>
    )
}
_

また、他の人が提案したようにFragmentを使用したい場合は、代わりに_<>...</>_と書くことができることに注意してください。

1
Dustin

以下のように、コンポーネントをdivにラップして、そこにkeyを渡すだけです。

const Example = ({components}) => (
  <div>
    {components.map((component, i) => <div key={i}>{component}</div>)}    
  </div>
)

Worked example

1
The Reason

実際には、ファイルからelementsの配列をエクスポートしています。 1つの方法は、コンポーネントの配列をエクスポートし、次のようにレンダリングすることです

import React from 'react';
export default [
    ComponentOne
    ComponentTwo
];
// Then following will work
{components.map((Component, key) => (
    // Remember to make first letter capital (in this case "c")
    <Component key={key}/>
}

他の方法は、このようにdivでコンポーネントをラップすることです

import React from 'react';
export default [
    <ComponentOne/>
    <ComponentTwo/>
];
// Then wrap in div
{components.map((component, key) => (
    <div key={key}>
      {component}
    </div>
}
0
Prakash Sharma