문자열 이름에서 반응 구성 요소를 동적으로로드

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>) 
    } 
} 

지금은 예제가 하나의 구성 요소 만 보여줍니다.이 접근 방식이 작동하는지 테스트했기 때문에. 내가 여기서 누락 된 것.

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>