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