は、実行時に動的

Question

でレンダリングするコンポーネントを決定するI ReactComponentクラスに次のコードを持っている：

render() { 
    const snippets = entity.snippets.map(
     function (snippet, props) { 
      const SnippetType = snippet['type']; 
      //const SnippetType = "Text"; 
      return <SnippetType key={Math.random()} />; 
     } 
    ); 
// ....... 
    return (
     <article> 
      {snippets}; 
     </article> 
    ) 
} 

テキストコンポーネントは次のようになります。

const Text = (props) => (
    <div className="snippet text-snippet"> 
     <h2>{props.name}</h2> 
     <p>{props.content}</p> 
    </div> 
); 

私は私が間違ってここにやって、わからないんだけど、<SnippetName ...>はいつも私が（上記のコメント行あたりのように）文字列として手動Textを定義した場合でも、代わりに実際のコンポーネントのようにHTMLをレンダリング。

何時間も失敗した後、私はあなたに尋ねます：私は間違っていますか？

Answer 1

変数snippetには何を保存していますか？コンポーネントをロードした結果（つまり、const snippet['type'] = require('MyTextComponent')）を保存すると、これが機能するはずです。

文字列がコンポーネントではないため、文字列をコンポーネントとしてレンダリングできません。あなたは、文字列対コンポーネントに設定して、あなたの//const SnippetType = "Text";コメントアウトするために、すなわち（私が言いたいことが表示されますとき、変数がどのように見えるかを比較してください。

たぶんすることができます、その後

const SnippetComponents = {}; 
SnippetComponents['text'] = require('MyTextComponent'); 

のようなものを試してみてくださいgo