文字列名からの反応成分の動的ロード

Question

異なる入力コンポーネントに異なる反応成分をロードする必要があります。これは非常に巨大になるので、私はスイッチケースを使いたくない。だから、ロードする各タイプとコンポーネントのマップを作成し、変数を使用して最終的なレンダーコンポーネント名を設定します。しかし、これは動作していません。

const FIELD_COMPONENTS_CLASSES_MAP = { 
    text: 'FieldsComponent', 
    phone: 'FieldsComponent', 
    email: 'FieldsComponent', 
    decimal: 'FieldsComponent', 
    date: 'FieldsComponent', 
    datetime: 'FieldsComponent', 
    location: 'FieldsComponent', 
    meeting: 'FieldsComponent', 
    number: 'FieldsComponent', 
    multi_select_check_box: 'FieldsComponent', 
    code_name_spinner: 'FieldsComponent', 

}; 
export default class FieldsFactoryComponent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = {field: this.props.field, options: this.props.options}; 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({field: nextProps.field, options: nextProps.options}); 
    } 

    render() { 
     let Component = 'FieldsComponent'; 
     if(this.state.field) { 
      Component = FIELD_COMPONENTS_CLASSES_MAP[this.state.field._data.type] 
     } 

     return (this.state.field ? 
      <Component field={this.state.field} options={this.state.options} 
          onSave={this.props.onSave}> </Component> : <div className="hidden"></div>) 
    } 
} 

ここでは、このアプローチが有効であるかどうかをテストしていたので、1つのコンポーネントのみを表示しています。私がここで紛失しているもの

Answer 1

FIELD_COMPONENTS_CLASSES_MAP[this.state.field._data.type]は、コンポーネントオブジェクトではなく文字列を返します。

FIELD_COMPONENTS_CLASSES_MAPには、文字列名ではなくコンポーネントオブジェクトへの参照が含まれている必要があります。

const FieldsComponent = props => { 
    return (
    <p>Foo</p> 
) 
} 

const FIELD_COMPONENTS_CLASSES_MAP = { 
    text: FieldsComponent, 
    phone: FieldsComponent, 
    email: FieldsComponent, 
    //... 
}; 

Answer 2

component自体をキーの値として割り当てる必要があります。 例を参照してください。

希望すると助かります！

class A extends React.Component{ 
 
    render(){ 
 
    return <h1>Hello! I'm A</h1> 
 
    } 
 
} 
 

 
class B extends React.Component{ 
 
    render(){ 
 
    return <h1>Hello! I'm B</h1> 
 
    } 
 
} 
 

 
const map = { 
 
    A, //equal to A: A 
 
    B, //equal to B: B 
 
} 
 

 
class App extends React.Component{ 
 
    constructor(){ 
 
    super() 
 
    this.onChange = this.onChange.bind(this) 
 
    this.state = { 
 
     component: 'A' 
 
    } 
 
    } 
 
    onChange(e){ 
 
    this.setState({ 
 
     component: e.target.value 
 
    }) 
 
    } 
 
    
 
    render(){ 
 
    const Component = map[this.state.component || 'A'] 
 
    return <div> 
 
     <select onChange={this.onChange} selected={this.state.component}> 
 
     <option value="A">A</option> 
 
     <option value="B">B</option> 
 
     </select> 
 
    <Component/> 
 
    </div> 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>