javascript - 渲染 Prop 和 React Router

Question

我有一个应用程序，其中有许多页面具有相似的外部功能，但内部功能不同。外部功能需要状态，例如每个页面需要有一个可以在该页面上更改的日期，而不影响其他页面上的各个日期。

我认为重构这个的最好方法是使用装饰器，无论是 HOC 还是渲染 Prop 。我选择了渲染 Prop ，但我对这种模式非常陌生，而且我正在努力实现它。

这是布局 - 我刚刚使用了一个简单的计数器来说明我在创建具有单独状态的单独装饰组件时遇到的问题。

我有一个包含 React Router 逻辑的外部组件:

  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>
  );
};

PageWrapper 看起来像这样:

const PageWrapper = ({children}) => {

  const [counter, setCounter] = useState(0)

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

  return children({
      counter,
      incrementCounter
  });

};

export default PageWrapper;

最后，每个部分如下所示:

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

因此，我传递给 props.children 的属性对象包含计数器和incrementCounter 方法。

我的问题是，当我使用路线转到Section1Test并增加计数器时，它也会增加Section2Test的计数器。这违背了装饰器的目的，因为组件显然共享状态。

如果有人能帮我看看问题出在哪里，那就太好了。

非常感谢。

Answer 1

嗯，您正在 PageWrapper 内的所有组件之间共享状态。解耦的一种方法是创建一个自定义钩子(Hook)，作为 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>
);