は、コンポーネント

Question

この

class CarMaker extends React.Component { 
    constructor(props) { super(props); } 
    handleEvent() { /* common handler code */ } 

    getComponent() { 
     let component = null; 

     switch(type) { 
      case 'hatchback': 
       // unique logic about hatchbacks 
       // consider attribues computed inside each case 
       component = <HatchbackMaker {...hatchbackAttrs} />; 
       break; 
      case 'sedan': 
       component = <SedanMaker {...sedanAttrs} />; 
       break; 
      case 'truck': 
       component = <TruckMaker {...truckAttrs} />; 
       break; 
     } 
     // Is there any way to attach event handler like this dynamically? 
     component.onClick = this.handleEvent.bind(component); 
     return component; 
    } 

    render() { 
     let arr = []; 
     dataList.forEach(function(dataItem) { 
      arr.push(this.getComponent(dataItem.type)); 
     }, this); 

     return (<div>{arr}</div>;) 
    } 
} 

（変数で開催された）既存のコンポーネントへのonClickハンドラを追加して、「この」の値とそのコンポーネント自体をバインドするための最良の方法は何でしょうか。考えてみての反応しますか

私はこれらが含まれているのか分からないので、あなたが渡すことができます属性とは別に、上記の例で小道具を示している割り当て

getComponent() { 
     let component = null; 

     switch(type) { 
      case 'hatchback': 
       // unique logic about hatchbacks 
       // consider attribues computed inside each case 
       component = <HatchbackMaker {...hatchbackAttrs} onClick={this.handleEvent.bind(this)}/>; 
       break; 
      case 'sedan': 
       component = <SedanMaker {...sedanAttrs} onClick={this.handleEvent.bind(this)}/>; 
       break; 
      case 'truck': 
       component = <TruckMaker {...truckAttrs} onClick={this.handleEvent.bind(this)}/>; 
       break; 
     } 

     return component; 
    } 

時onClickイベントを割り当てないのはなぜ

Answer 1

それぞれprop attributesも同様です。

Answer 2

あなたは、入力されたタイプに基づいて代わりに動的にエレメントを作成したいと思っています。

開始時に大文字に変更してください。

など。 "セダン"→ "セダン"

または、大文字でJSを使用します。

class Cars extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      carData: [] 
     }; 
    } 
    OonClickHandler() { 
     /* common handler code */ 
    } 
    componentWillMount() { 
     //Api call to server to get car types just for example 
     $.ajax("someUrl", success: (data) => { 
      //[ { title: 'Honda City', type: 'sedan', shapeSVGURL: '<url>', . . //more properties . }, { title: 'VW Golf', type: 'hatchback', otherUniqueAttrs: [] . //more properties . } ] 
      this.setState({carData: data}); 
     }); 
    } 
    render() { 
     return (
      <div> 
       //Make sure that type has upper case later at start or use JS to make it so 
       this.state.carData.map(car => React.createElement(car[type], {...car, onClick={this.onClickHandler}})) 
      </div> 
     ) 
    } 
} 

class Honda extends React.Component { 
    render() { 
     return (

     ) 
    } 
} 

class VWGolf extends React.Component { 
    render() { 
     return (

     ) 
    } 
}