dom reactjsにさまざまなタイプの要素を追加する方法は？

Question

私はツールバーのコンポーネントと、メインページコンポーネントにテキスト、イメージ、ビデオ要素を追加する3つのオプションを持っています。私はメインページコンポーネントにクリックハンドルを書き、このイベントハンドラをツールバーコンポーネントに渡します。

私の簡単なアイデアは、要素のタイプを定義するパラメータを持つスイッチですが、それらをレンダリングする方法はわかりません。

どうすればいいですか？

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

    render() { 
     return (
      <div id="toolbarSection"> 
      <div class="option" onClick={this.props.handleActionsClick("image")}>new Image</div> 
      <div class="option" onClick={this.props.handleActionsClick("text")}>new Text</div> 
      <div class="option" onClick={this.props.handleActionsClick("shape")}>new Shape</div> 
      </div> 
     ); 
    } 
} 

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

    handleActionsClick(type){ 
     switch(type){ 
      case "image": 
       //How can i render the <img/>? 
      case "text": 
      case "video": 
     } 
    } 

    render() { 
     return(); 
    } 
} 

Answer 1

JSXは、ボンネットの下に使用するものである、代わりにcreateElementを使用してください。

クリックコンポーネントにカスタムコンポーネントを渡したり、「img」のようなネイティブエレメントの文字列を渡すことができます。

ここではstateless componentを使用していますが、必要に応じてクラスを使用することもできます。

const ToolBarContainer = ({ handleActionsClick }) => (
    <div id="toolbarSection"> 
     <div class="option" onClick={handleActionsClick('img')}>new Image</div> 
     <div class="option" onClick={handleActionsClick(Text)}>new Text</div> 
     <div class="option" onClick={handleActionsClick(Shape)}>new Shape</div> 
    </div> 
); 

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

     this.state = {}; 
     this.handleActionsClick = this.handleActionsClick.bind(this); 
    } 

    handleActionsClick(type){ 
     this.setState({ type }); 
    } 

    render() { 
     return React.createElement(this.state.type); 
    } 
}