Overriding behaviour of sibling components - reactjs

Question

I've been struggling with the concept of overriding the behaviour of components between sibling components (components that do not have a parent-child relationship).
I have an App component that renders a header and a content component. The header contains a button that will let a user navigate back (not for real in this example). Now I want the content component to override the back button's behaviour, for example if a user is editing a form and I want to pop up a modal.
The reason I want to do this is because I want to (optionally) control navigation from within the content component itself.
I have found this (see snippet) solution, but I feel like it's not the right way to handle this. I would like to have some advice on how to handle this situation.
A few side-notes:
I'm actually building a react-native app, but in the hope of reaching more people I've simplified it down to a react example. I'm using NavigatorExperimental for navigation.
I am using redux/redux-form
Any help is appreciated.
class NavigationHeader extends React.Component {
render() {
return (
<span onClick={this.props.goBack}>Go back!</span>
);
}
}
class Content extends React.Component {
componentDidMount() {
this.props.setBackButtonBehaviour(() => console.log("BackButton overridden from Content"));
}
componentWillUnmount() {
this.props.resetBackButtonBehaviour();
}
render() {
return (<div style={{background: "red"}}>Content</div>);
}
}
class Navigator extends React.Component {
constructor(props) {
super(props);
this.state = {
overrideHeaderBackButtonBehaviour: null
}
}
setBackButtonBehaviour(func) {
this.setState({overrideHeaderBackButtonBehaviour: func});
}
resetBackButtonBehaviour() {
this.setState({overrideHeaderBackButtonBehaviour: null});
}
defaultBackButtonBehaviour() {
console.log("Default back-button behaviour");
}
render() {
return (
<div>
<NavigationHeader goBack={this.state.overrideHeaderBackButtonBehaviour || this.defaultBackButtonBehaviour} />
<Content
setBackButtonBehaviour={this.setBackButtonBehaviour.bind(this)}
resetBackButtonBehaviour={this.resetBackButtonBehaviour.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(<Navigator />, document.getElementById("app"));
<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="app">
</div>

Answer 1

You can try something like this:
Header.js
import actions from './actions';
#connect(
// map state to props
(state, props) => ({
canNavigate: state.navigation.canNavigate,
}),
// map dispatch to props
{
goBack: actions.goBack,
showNavigationAlert: actions.showNavigationAlert,
}
)
class Header extends React.Component {
render() {
return (
{/* if 'canNavigate' flag is false and user tries to navigate, then show alert */}
<span
onClick={this.props.canNavigate ? this.props.goBack : this.props.showNavigationAlert}
>
Go back!
</span>
);
}
}
Content.js
import actions from './actions';
#connect(
// map state to props
(state, props) => ({
navigationAlert: state.navigation.navigationAlert,
}),
// map dispatch to props
{
toggleNavigation: actions.toggleNavigation,
}
)
class Content extends React.Component {
render() {
return (
<div>
{/*
Show modal if 'navigationAlert' flag is true;
From the modal, if user choose to leave page then call toggleNavigation.
You may call the corresponding navigation function after this (eg: goBack)
*/}
{this.props.navigationAlert && <Modal toggleNavigation={this.props.toggleNavigation} />}
{/* eg: disable navigation when clicked inside the div */}
<form onClick={this.props.toggleNavigation}>
Content click!
</form>
</div>
);
}
}
App.js
class App extends React.Component {
render() {
return (
<div>
<Header />
<Content />
</div>
);
}
}
navigationReducer.js
const initialState = {
canNavigate: true,
navigationAlert: false,
};
export function navigationReducer(state = initialState, action = {}) {
let newState = {};
switch (action.type) {
case TOGGLE_NAVIGATION:
return { ...state, canNavigate: !state.canNavigate };
case TOGGLE_NAVIGATION_ALERT:
return { ...state, navigationAlert: !state.navigationAlert };
default:
return state;
}
}
actions.js
export function toggleNavigation(gdsSession) {
return { type: TOGGLE_NAVIGATION };
}
export function toggleNavigationAlert(gdsSession) {
return { type: TOGGLE_NAVIGATION_ALERT };
}
// ... other actions
and render into DOM.
ReactDOM.render(<App />, document.getElementById("app"));