어떤 하위 구성 요소가 렌더링해야하는지 하위에 보내기 - React js

Question

<input>의 <div>과 더 가까운 확대/축소를 위해 입력 div를 렌더링해야하는 모달 창을 여는 onClick 이벤트가 있지만이 모달을 사용하고 있습니다. 숫자판 렌더링 창.

렌더링 할 구성 요소를 구별 할 수있는 방법이 있습니까? 특정 구성 요소를 모달 구성 요소 (하위)로 보내고이 구성 요소를 렌더링 할 수 있습니까?

{React.cloneElement(this.props.children, { ...others})} 

<Modal child={Numpad} update={this.editValue.bind(this)}/> 

다음 모달 (자식)에서

<Modal update={this.editValue.bind(this)}>{Numpad}</Modal> 

또는

을하지만 유효하지 않은 요소 유형의 오류를 던지고, 작동하지 않습니다 - 나는 이런 식으로 뭔가를 시도했다. modal의 렌더링 구성 요소 내부에서 스위치를 사용하여 props.type으로 렌더링 할 구성 요소를 구별 할 수 있지만 좀 더 간단한 방법으로 모든 팁을 원하십니까?

Answer 1

올바르게 이해한다면 모달 창에 탭 인터페이스를 만들어 현재 활성 탭에 따라 다른 내용을 표시 할 수 있습니다. 그 문제에 대한 다음 해결책을 볼 수 있습니다.

이

class App extends React.Component { 
    render() { 
    return (
     <Modal> 
     <div>The content of the first tab</div> 
     <div>The content of the second tab</div> 
     <div>The content of the third tab</div> 
     </Modal> 
    ); 
    } 
} 

각 아이 (div) 구성 요소는 위의 Modal 각 탭에 대한 내용을 나타냅니다

첫째, 우리는 Modal 구성 요소와 해당 컨텐츠를 보유 할 기본 구성 요소를 만들 수 있습니다.

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

    this.state = { 
     tabIndex: 0 
    }; 
    } 

    switchTabs(tabIndex) { 
    this.setState({ 
     tabIndex 
    }); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.switchTabs.bind(this, 0)}>1</button> 
     <button onClick={this.switchTabs.bind(this, 1)}>2</button> 
     <button onClick={this.switchTabs.bind(this, 2)}>3</button> 
     <div> 
      {React.Children.map(this.props.children, (child, index) => 
      index === this.state.tabIndex && child 
     )} 
     </div> 
     </div> 
    ) 
    } 
} 

우리는 구성 요소의 로컬 상태의 일부로서 활성 탭 (tabIndex)의 인덱스를 유지 :

이제 Modal 구성 요소 자체를 만들 수 있습니다. 또한이 탭을 전환하기위한 세 개의 버튼이 있습니다.

마지막으로 React.Children.map을 사용하여 하위 구성 요소를 반복하고 index이 현재 tabIndex에 해당하는 하위를 표시합니다.

아래 스 니펫을 시도해보십시오.

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

 
    this.state = { 
 
     tabIndex: 0 
 
    }; 
 
    } 
 
    
 
    switchTabs(tabIndex) { 
 
    this.setState({ 
 
     tabIndex 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.switchTabs.bind(this, 0)}>1</button> 
 
     <button onClick={this.switchTabs.bind(this, 1)}>2</button> 
 
     <button onClick={this.switchTabs.bind(this, 2)}>3</button> 
 
     <div> 
 
      {React.Children.map(this.props.children, (child, index) => 
 
      index === this.state.tabIndex && child 
 
     )} 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <Modal> 
 
     <div> 
 
      <img src="https://avatars2.githubusercontent.com/u/4226954?v=3&s=400" height="200" /> 
 
     </div> 
 
     <div style={{ height: '200px', width: '200px', marginTop: '5px' }}>The second tab</div> 
 
     <div> 
 
      <img src="https://avatars3.githubusercontent.com/u/810671?v=3&s=400" height="200" /> 
 
     </div> 
 
     </Modal> 
 
    ); 
 
    } 
 
} 
 

 
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>