作るreactjsで再利用可能なコンポーネント

Question

Iている次のコードを、別のファイルに<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, 
     }); 
} 

ような何かを達成するための計画：あなたはNode.jsのを使用している場合、それは別のJSファイルにあなたのコンポーネントを管理するのは非常に簡単です

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

Answer 1

を。 ToggleView.js - - 例として

は新しい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 
}; 

プロップあなたはクリックでトリガするためにあなたを必要に応じて

<ToggleView handleFunc={this.thisFunc} /> 

そしてToggleView.jsで

は、子供への機能：

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

このシナリオでは、我々はを支えるthisFuncあなたが状態または何を設定する必要があるかどうか、親にロジックを設定することが可能になり、子供にダウン。

うまくいけば、これが役に立ちます。