一部のparamを使用してReactコンポーネントを取得する方法

Question

別のparamに応じて、Component内の異なるビューをレンダリングしたい場合、これらのビューはいくつかのテンプレートから取得します。 Main.js

render() { 
    const{ data, isEdit } = this.props 
    console.log('Detail data:', data) 
    console.log('isEdit:', isEdit) 
    return <div> 
    {getView(data)} 
</div> 
} 

getView

function getView(data) { 
    let modelName = getModelName(data.PolciyName) 
    modelName = 'M1' 
    if (modelName) { 
    let Model = require(`./models/${modelName}`) 
    console.log('getView- modelName', modelName) 
    console.log('typeof', typeof M1) //Object 
    return <div><Model data={data} /></div> 
    } else { 
    return <div>no data</div> 
    } 
} 

M1

function M1(data) { 
    return <div> 
    <h2>{data.name}</h2> 
    </div> 
} 

と、このコードは動作しないことができる、それはエラーになります。 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method ofメイン.

Answer 1

でレンダリング{getViewメソッド（データ）}呼び出し、

{this.getView（データ）}関数M1への参照を持つ代わりに、それを使用してみてください。 JavaScriptが実際にクラスを持っていないという点で、JavaScriptは他のオブジェクト指向言語とは少し異なる働きをしているため、コンポーネント内でローカルにスコープを明示的に記述する必要があります。