再利用可能なコンポーネントを作成するreactys

Question

再利用可能な小さなコンポーネントを作成するとファイルサイズが小さくなり、ユニットテストが迅速かつ簡単になります。だから私は今、1つを作成しようとしていますが、私はreactjsには非常に新しいです、私は友人のためにこのプロジェクトを維持しているので、私はすべてのコードを記述していません。相続人

コードスニペット：

class ObjectKeyDisplay extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { open: false } // Sets open to false (closed) 
    } 

    renderInner() { 
    const { schema, parentDocumentId, collectionName, value } = this.props 
    const { open } = this.state // equals const open = this.state.open 

    let expandButton 
    if (schema.type === 'belongs_to') { 
     expandButton = (
     <button onClick={e => this.setState({ open: !open })}> // Sets it to true (opened) 
      {open ? 'Minimera' : 'Expandera'} 
     </button> 
    ) 
    } 

だから私は基本的にコンポーネントに全体のオープン/クローズ処理をしたいので、私は簡単に他のボタンのためのロジックを再利用します。誰かがここで私を助けることができたら本当に感謝します！

Answer 1

Here's a working example。

ボタンを独自のコンポーネントに移動すると、自分の開いた状態を制御できます。また、親コンポーネントで使用できる状態が変化したときにコールバックを提供することをお勧めします。条件付きでボタンの内容をレンダリングする方法は複数あります。私がここで行ったことは、一連の子を渡し、openが真の場合、配列の最初の子をレンダリングします。

class Main extends React.Component { 
    render(){ 
    return (
     <div> 
     Expand button 
     <ExpandButton onOpen={() => console.log('opened')} onClose={() => console.log('closed')} > 
      <div>Open</div> 
      <div>Close</div> 
     </ExpandButton> 
     </div> 
    ) 
    } 
} 
class ExpandButton extends React.Component { 
    constructor(){ 
    super(); 
    this.toggleOpen = this.toggleOpen.bind(this); 
    this.state = { 
     open: false 
    } 
    } 
    toggleOpen(){ 
    this.setState({ 
     open: !this.state.open 
    },() => { 
     // Trigger callbacks 
     if(this.state.open){ 
     this.props.onOpen(); 
     }else{ 
     this.props.onClose(); 
     } 
    }) 
    } 
    render(){ 
    const { open } = this.state; 
    return (
     <button onClick={this.toggleOpen}> 
     {open ? this.props.children[0] : this.props.children[1]} 
     </button> 
    ) 
    } 
} 
React.render(<Main />, document.getElementById('container'));