React composition: expose higher-order methods - reactjs

Question

Since I've seen React team have discouraged developers to use inheritance, I'm trying to use composition instead.
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);
In this case, several components will use Page as container and will have a next button. I'd like to expose a generic handler for the next button click in the Page component to avoid repeating the dispatch(customAction()).
I would easily achieve this with inheritance but I'm stuck with the composition pattern.
Any ideas?

Answer 1

I suggest you to provide additional prop for Page children:
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

You can use ref to refer to the Page element.
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>