Создание многоразового компонента в реакции

Question

У меня есть следующий код, который нужно удалить код повторного содержимого внутри <ReactCSSTransitionGroup в отдельный файл - не выглядит прямо вперед, чтобы передавать реквизиты туда и обратно от ребенка/родителя, как это сделать? это умело?

<div className="container"> 
    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
     <span key={this.state.showChild1} className="plus_icon"> 
     <a onClick={() => this.onClick('child1')}> 
      <Img className={this.state.showChild1 ? 'plus_icon' : 'minus_icon'} /> 
     </a> 
     </span> 
    </ReactCSSTransitionGroup> 
    {this.state.child1 ? <Child1-New /> : <div onClick={() => this.onClick('child1')}><Child1 /></div>} 
    </div> 

    <div className="container"> 
    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
     <span key={this.state.showChild2} className="plus_arrow"> 
     <a onClick={() => this.onClick('child2')}> 
      <img className={this.state.child2 ? 'plus_icon' : 'minus_icon'} /> 
     </a> 
     </span> 
    </ReactCSSTransitionGroup> 
    {this.state.child2 ? <Child2-New /> : <div onClick={() => this.onClick('child2')}><Child2 /></div>} 
    </div> 

onClick(name) { 
    if (name === 'child1') { 
     this.setState({ 
     showChild1: !this.state.showChild1, 
     }); 
    } else if (name === 'child2') { 
     this.setState({ 
     showChild2: !this.state.showChild2, 
     }); 
} 

планирует достичь что-то вроде:

<div className="container"> 
    <ToggleView /> 
    {this.state.child2 ? <Child2-New /> : <div onClick={() => this.onClick('child2')}><Child2 /></div>} 
    </div> 

Answer 1

Если вы используете Node.js это довольно просто управлять компонентами в виде отдельных файлов JS.

Создайте новый JS-файл - ToggleView.js - в качестве примера.

var React = require('react'); 
module.exports = React.createClass({ 
render: function() { 
    return (
     <div> 
      ... Your markup etc here 
     </div> 
    ); 
}); 

И тогда вы можете потребовать его изнутри JS, где вы хотите использовать:

var ToggleView = require('ToggleView.js'); 

И затем использовать его:

<div className="container"> 
    <ToggleView /> 
</div> 

Во-вторых, если государство управляется у родителя, к которому вам нужны ваши дети, чтобы иметь доступ, вы можете просто опираться на них.

function thisFunc(val) { 
    // do something 
}; 

Prop функция ребенку

<ToggleView handleFunc={this.thisFunc} /> 

И в ToggleView.js, если нужна твоя, чтобы вызвать по нажатию:

... 
    <a onClick={this.prop.handleFunc}> 
     <img ... /> 
    </a> 
... 

В этом случае мы проп thisFunc до ребенка, который позволит вам установить логику у родителя, нужно ли устанавливать состояние или что-то еще.

Надеюсь, это поможет!