渲染道具和反应路由器

Question

I have an app where there are many pages that have similar outer functionality, but different inner functionality. The outer functionality requires state, for example each page needs to have a date that can be changed on the page, without affecting the individual dates on the other pages.

I thought the best way to refactor this would be to use a decorator, either an HOC or a render prop. I went for render props but I'm very new to the pattern and I'm struggling to implement it.

Here's the layout - I've just used a simple counter to illustrate the problem I'm having creating separate decorated components with separate state.

I have an outer component which contains the React Router logic:

  return (
    <PageLayout>
      <Grid item xs={12}>
        <Grid container spacing={2}>

          <Switch>
            <Route
              exact
              path="/section1/overview"
              render={() => (
                  <>
                  {<PageWrapper>{pageProperties => <Section1Test properties={pageProperties}/>}</PageWrapper>}
                  </>
              )}
            />
            <Route
              exact
              path="/section2/overview"
              render={() => (
                  <>
                  {<PageWrapper>{pageProperties => <Section2Test properties={pageProperties}/>}</PageWrapper>}
                  </>
              )}
            />
          </Switch>
        </Grid>
      </Grid>
    </PageLayout>
  );
};

and the PageWrapper looks like this:

const PageWrapper = ({children}) => {

  const [counter, setCounter] = useState(0)

  const incrementCounter = () => {
    setCounter(counter + 1)
  }

  return children({
      counter,
      incrementCounter
  });

};

export default PageWrapper;

Finally, each of the sections looks like this:

const { counter, incrementCounter } = properties;
    return (
        <div>
            {counter}
            <button onClick={incrementCounter}>Click me</button>
        </div>

So the properties object that I'm passing to props.children contains the counter and the incrementCounter method.

My issue is that when I go to Section1Test with the route, and increment the counter, it's also incrementing the counter of Section2Test. This defeats the purpose of having a decorator, since the components are clearly sharing state.

It would be great if someone could help me see where the problem is.

Many thanks.

Answer 1

Well, you are sharing the state between all the components that are inside PageWrapper. One way to decouple it would be to make a custom hook, as an alternative to HOC:

const useCounter = () => {
  const [counter, setCounter] = useState(0)

  const incrementCounter = () => {
    setCounter(counter + 1)
  }

  return {counter, incrementCounter};
}

// Inside component

const { counter, incrementCounter } = useCounter();
return (
  <div>
    {counter}
    <button onClick={incrementCounter}>Click me</button>
  </div>
);

Answer 2

So, I actually did some work on this just for fun, feeling like I need to get better at various things in React. I did some reading on Higher Order Components and I actually developed a Higher Order Component that you feed your existing component to, it handles the state and sends down {counter, incrementCounter} as props, it also maintains state based on the name of the component you feed it (you could modify it to maintain state based on an optional variable or prop as well, if you wanted to)

Check it out:

HOC.js :

import React from 'react';
import autoBind from 'react-autobind';

export default function HOC(WrappedComponent)  {
    const componentName = WrappedComponent.name;

    return class extends React.Component {

        constructor(props) {
            super(props);

            this.state = getState(componentName);

            autoBind(this);
        }

        addOne() {
            this.setState({counter: this.state.counter+1}, () => {
                updateState(componentName, this.state);
            })
        }

        render() {
            return (
                <div>
                    <p>this component is wrapped</p>
                    <WrappedComponent properties={{counter: this.state.counter, incrementCounter: this.addOne}}/>
                </div>
            )
        }
    };
}

const states = {};
function getState(name) {
    if (name in states) return states[name];
    return {counter: 0}
}

function updateState(name, newState) {
    states[name] = newState
}

section1test.js :

import React from 'react';

export default class Section1Test extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const { counter, incrementCounter } = this.props.properties;
        return (
            <div>
                <p>section1</p>
                <input value={counter && counter.toFixed(2)}/> <br/>
                <button onClick={incrementCounter}>Click me</button>
            </div>
        )
    }
}

Make a section2 that's mostly similar but a little different, and then do this in your component that's supposed to house section1 and section2:

// have this be ABOVE the class definition
const WrappedSection1 = HOC(Section1Test);
const WrappedSection2 = HOC(Section2Test);

...
// and then inside the render function
               <Link to="/section3/overview">Three</Link><br/>
                <Link to="/section4/overview">Four</Link><br/>
                <Switch>
                    <Route
                        exact
                        path="/section3/overview"
                        render={() => (
                            <WrappedSection1 />
                        )}
                    />
                    <Route
                        exact
                        path="/section4/overview"
                        render={() => (
                            <WrappedSection2 />
                        )}
                    />
               </Switch>

Now section1 and section2 will have unique counters, and when you go back to section1 or section2, the counter state will be the same as it was when you left it!