jsonデータから別のコンポネントを渡す

Question

私は反応の中でスライドカルーセルを作成しています。私は解析して、それを解析してレンダリングのために親コンポーネントに送るjsonファイルにリストされたスライドコンポーネントを持たせたいと思います。私はそれがコンポーネントを渡すことによって行うことができますが、私はどのようにjsonの文字列から実際のコンポーネントにそれを解析するのか分からない。

私のJSONは、このようなものです：

{ "slides": 
[ 
{ 
    "id": "slide0", 
    "title": "Slide: 0", 
    "caption": "Slide caption: 0", 
    "slideNum": 0, 
    "url": "adminLogins", 
    "slideType": "<AdminLoginsChart />" 
}, 
...etc. json 
]} 

私はこのような別のコンポーネントにコンポーネントを渡すことができます。

<Slide component={this.state.slides[this.state.slideNum].slideType}/> 

が、私はJSONの文字列としてでコンポーネントを持ったときに、私ができますそれを通過するコンポーネントに戻しているようです。引用符を何も置き換えないとJSON.parse（item）を実行するとjsonの解析エラーが発生します。誰かが文字列値をコンポーネントとして渡してみて、どうにかそれらをコンポーネントに変換しましたか？

Answer 1

もうすぐです！提供

const components = [{ 'YourComponent': YourComponentReference }]; 

const Slide = ({ 
    component, 
} => { 
    const Component = components[component]; 
    return (
    <Component /> 
); 
}); 

Answer 2

：<Slide />で年代は、あなたがこのような何かをしたいレンダリング、その後

import YourComponent from './YourComponent';  

{ 
    slides: [{ 
    id: 'slide0', 
    title: 'Slide 0', 
    ... 
    slideType: 'YourComponent', 
    }], 
} 

：あなたはそれがJSONファイル（その文字列）であることする必要がある場合は、これを試してくださいあなたのコンポーネントはSlideコンポーネントと同じフォルダに保存され、javascriptファイルは大文字になります（例えばAdminLoginsChart.js）。コンポーネントの名前はJSONファイルで利用可能です（例えば "slideType"： "AdminLoginsChart"）。次のようにスライドコンポーネントを書き込むことができます：

class Slide extends React.Component { 

    render() { 
    const { component, ...props } = this.props; 
    const Component = require(`./${component}`).default; 
    return (
     <div className="slide> 
     <Component {...props} /> 
     </div> 
    ) 
    } 

} 

ファイル名にアンダースコアを使用している場合は、lodashsnakeCase関数を使用して、コンポーネント名をファイル名に変換することができます。