1
を複数のコンポーネントをレンダリングしない反応します私はHomeFactoryを同様に使用します：は問題は以下の通りです、私は工場を持っているファクトリ関数を通じて
import React from 'react';
import Factory from '../Factory';
import HeroBanner from '../Banner/HeroBanner';
const HomeFactory = ({state, props}, HomePage) =>
{
return <HomePage {...props} {...state} >
<HeroBanner />
</HomePage>;
};
export default Factory(HomeFactory);
私が使用するHomePageコンポーネントの最終コードSが搭載され、次のようにです：
import React from 'react';
import Page from '../Page';
import HomeFactory from '../HomeFactory';
const HomePage = ({children, appState}) =>
{
return (
<Page appState={appState}>
{children}
</Page>
);
};
export default HomeFactory(HomePage);
問題は、私が置かれているHomeFactoryコンポーネント、のようです：与えられた例のように
return <HomePage {...props} {...state} >
<HeroBanner />
</HomePage>;
、これは100％正しく動作しますが、しかし、 、私は、配列の形式で複数のコンポーネントを配置しようか、単に多くのコンポーネントは次のように、中にネストされたとき：
：return <HomePage {...props} {...state} >
<HeroBanner />
<HeroBanner />
<HeroBanner />
</HomePage>;
私は、次のエラーを取得しています
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
基本的に、ページラッパーコンポーネントは、親コンポーネントHomePageの子として渡されるプロパティを取得しています。これらは、ファクトリメソッドから取得されます。
JSXで暗黙のうちに次のことはできないのですか？あなたは複数の子を渡す際Children.mapとともにcloneElementを使用する必要があなたのページコンポーネントで
このように見えます。ありがとう。私はReactが暗黙的に失敗するのではなく、そうでなければレンダリングできる複数の名前付きプロパティ '子'へのアクセスを追加する点が何かを期待しています。 – pixelSlayer
ええ、それはちょっと混乱していて、私も噛まれて気づきました。私のコメントも答えに変わりました。 –