反応の構成：高次のメソッドを公開する

Question

Reactチームが開発者に継承を使用させてしまったのを見たことがあるので、代わりに合成を使用しようとしています。

export class Page extends React.PureComponent { 

    shouldComponentUpdate(nextProps, nextState) { 
     return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state); 
    } 

    render() { 
     return this.props.children; 
    } 
} 


const mapStateToProps = (state, ownProps) => { 
    return {} 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onNextClick:() => dispatch(customAction()) 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Page); 


export class FirstPage extends React.PureComponent { 

    render() { 
     return (
      <Page> 
       <div> 
        <h1>Title</h1> 
        <Button onClick={this.props.onNextClick}>Next</Button> 
       </div> 
      </Page> 
     ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return {} 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onNextClick:() => dispatch(customAction()) 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(FirstPage); 

この場合、いくつかのコンポーネントはページをコンテナとして使用し、次のボタンを表示します。 dispatch(customAction())を繰り返さないようにするには、Pageコンポーネントの次のボタンをクリックするジェネリックハンドラを公開したいと思います。 これを継承で簡単に達成できますが、私は構成パターンに悩まされています。 アイデア

Answer 1

私はあなたがPage子供のための追加的な小道具を提供することをお勧め：アプローチだが、私はそれが非常にエレガント見つからない

export class Page extends React.PureComponent { 

    shouldComponentUpdate(nextProps, nextState) { 
     return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state); 
    } 

    render() { 
     const {onNextClick} = this.props; 
     return React.cloneElement(this.props.children, {onNextClick}); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onNextClick:() => dispatch(customAction()) 
    } 
}; 

export default connect(null, mapDispatchToProps)(Page); 


export class FirstPage extends React.PureComponent { 
    render() { 
     return (
      <div> 
       <h1>Title</h1> 
       <Button onClick={this.props.onNextClick}>Next</Button> 
      </div> 
     ); 
    } 
} 

export class App extends React.PureComponent { 
    render() { 
     return (
      <Page> 
       <FirstPage /> 
      </Page> 
     ); 
    } 
} 

Answer 2

refを使用すると、Page要素を参照できます。

class Page extends React.Component { 
 
    nextHandler(){ 
 
    console.log("I am in the parent."); 
 
    } 
 
    
 
    render(){ 
 
    return this.props.children; 
 
    } 
 
} 
 

 
class FirstPage extends React.Component { 
 
    render(){ 
 
    return (
 
     <Page ref={ page => this.page = page }> 
 
     <div> 
 
      <h1>Title</h1> 
 
      <button onClick={() => this.page.nextHandler() }>Next</button> 
 
     </div> 
 
     </Page> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<FirstPage />, document.getElementById("root"));

<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="root"></div>