Как добавить различные типы элементов в domaction?

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

Используйте createElement вместо этого, что и JSX использует под капотом.

Затем вы можете передать пользовательский компонент обработчику или строке для собственных элементов типа «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); 
    } 
}