React：通过布局组件传递道具

Question

这里是 React 的新手，我想要一个过滤器（在 Nav.js 中）过滤 App.js 上的内容，但嵌套在 Layout 组件中。在这里传递道具的最佳方式是什么？我可以将所有内容都保留为功能组件吗？

这里的文件： https://codesandbox.io/s/filter-menu-react-layout-uvppj?file=/src/Layout.js

Answer 1

只需将 setFilter 作为 props 传递，就可以开始了。

const Layout = props => {
  const { setFilter, children } = props;
  return (
    <div>
      <Nav setFilter={setFilter} />
      {children}
    </div>
  );
};