Отправить ребенку, который компонент должен отобразить - React js

Question

У меня есть <div> из нескольких <input> и событие onClick, чтобы открыть модальное окно, которое должно отображать определенные div входов для более близкого масштабирования, но я использую этот модальный для рендеринга numpad.

Есть ли способ отличить, какой компонент должен быть визуализирован? Есть ли возможность отправить определенный компонент в модальный компонент (дочерний элемент), а затем отобразить этот компонент? Я пытался что-то вроде этого -

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

или

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

, а затем в модальной (ребенка)

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

, но он не работает, выбрасывая недопустимую ошибку типа элемента. Я могу просто использовать switch, внутри рендеринга компонента Modal, чтобы отличить, какой компонент визуализировать с помощью props.type, но я хочу более простой способ сделать это, какие-нибудь советы?

Answer 1

Насколько я понимаю вас правильно, вы пытаетесь создать интерфейс с вкладками в модальном окне, чтобы вы могли отображать различный контент в зависимости от текущей активной вкладки. Я вижу следующее решение этой проблемы.

Во-первых, мы создаем базовый компонент, который будет содержать Modal компонент и его содержание:

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) как часть локального состояния компонента. Мы также показываем три кнопки для переключения между этими вкладками.

И наконец, мы перебираем компоненты детей с помощью 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>