将 useState 状态传递给 React 中的路由器组件
Pass useState state to router component in React
使用基于 class 的组件,我可以将状态传递给由 props 渲染的组件,方法是:
<Route path='/someroute' component={SomeComponent} someprop={someprop} />
但是,现在我正在使用 React Hooks,我的状态定义为:
const [myProjects, setMyProjects] = useState([
{projectName: Some project, id: 1},
{projectName: Some project, id: 2},
]);
现在路线忽略了这个道具。我确实读过一些关于人们使用渲染而不是组件的东西。但是在我看来,这样做的工作量和代码量看起来太老套了还是太多了?我的意思是引入了钩子以获得更好的代码。现在一个简单的 'someprop={someprop}' 必须用代码块代替?
我还阅读了一些关于路由器 v5 的一些新东西,但我找不到可靠和干净的方式来传递 props。
有人可以就此问题对我进行一些教育吗?
提前感谢您的宝贵时间!
更新答案
如果您在谷歌搜索后来到这里,这里有一个包含解决方案的沙盒!这是基于所选 solution/answer。其他观众也可能会查看此内容以了解我所面临的问题。也许有人有更多信息。我还在学习 React,天哪,这对我来说是一个很大的学习曲线哈哈
https://codesandbox.io/s/admiring-diffie-9kfgx?file=/src/App.js
你试过这个吗?
<Route path="/someroute" render={(props) => <SomeComponent {...props} someprop={someprop} />} />
这与挂钩与否无关,它基于 React Router Dom 的工作原理。
如果你不需要match
、location
或history
属性,那么你可以简化你的组件;
<Route path='/someroute'>
<SomeComponent someprop={someprop}/>
</Route>
如果您确实需要这些,那么您可以使用 React Router's hooks in your child component to get them, you can use the render prop of the route. You definitely don't want to try this with the component prop 之一,因为这将在每个渲染中创建一个新组件。
<Route path='/someroute' render={routeProps=><SomeComponent {...routeProps} someprop={someprop}/>} />
另一种方法是使用 withRouter 高阶组件:
//outside of the parent component
const SomeComponentWithRouter = withRouter(SomeComponent);
//In the render function:
<Route path='/someroute'>
<SomeComponentWithRouter someprop={someprop}/>
</Route>
编辑 post 提问者:
- 您显示的渲染标签,是否会导致不必要的重新渲染?我
阅读相关内容。
据我所知,渲染道具不会导致不必要的重新渲染。您可能会想到的是,尝试将 render prop 与 component prop 相同会导致问题:
来自 React Router 的 documentation:
When you use component (instead of render or children, below) the
router uses React.createElement to create a new React element from the
given component. That means if you provide an inline function to the
component prop, you would create a new component every render. This
results in the existing component unmounting and the new component
mounting instead of just updating the existing component. When using
an inline function for inline rendering, use the render or the
children prop (below).
https://tylermcginnis.com/react-router-pass-props-to-components/
- 而且我必须问,你能post一些初学者友好的参考吗
关于您所说的 'withRouter'?
同样,我必须向您推荐 React Router 的 documentation。它是有关 React Router 的最佳信息来源之一,并且保持最新状态。
withRouter 的主要要点是它是一个 higher order component 并且基本上会为您提供一个始终具有 match
、history
和 [=14] 的组件的新版本=] 传入的道具(匹配基于组件层次结构中第一个匹配的路由)。
关于 withRouter 真的没什么好说的,我有一个如何使用它的例子,它将这 3 个属性添加到你的组件中。
如果您正在使用函数组件,我个人建议使用 React Router 提供的 hooks,因为它们不需要高阶组件。与任何其他挂钩一样,它们可以更轻松地与任何自定义挂钩或函数组件组合。
使用基于 class 的组件,我可以将状态传递给由 props 渲染的组件,方法是:
<Route path='/someroute' component={SomeComponent} someprop={someprop} />
但是,现在我正在使用 React Hooks,我的状态定义为:
const [myProjects, setMyProjects] = useState([
{projectName: Some project, id: 1},
{projectName: Some project, id: 2},
]);
现在路线忽略了这个道具。我确实读过一些关于人们使用渲染而不是组件的东西。但是在我看来,这样做的工作量和代码量看起来太老套了还是太多了?我的意思是引入了钩子以获得更好的代码。现在一个简单的 'someprop={someprop}' 必须用代码块代替?
我还阅读了一些关于路由器 v5 的一些新东西,但我找不到可靠和干净的方式来传递 props。
有人可以就此问题对我进行一些教育吗?
提前感谢您的宝贵时间!
更新答案
如果您在谷歌搜索后来到这里,这里有一个包含解决方案的沙盒!这是基于所选 solution/answer。其他观众也可能会查看此内容以了解我所面临的问题。也许有人有更多信息。我还在学习 React,天哪,这对我来说是一个很大的学习曲线哈哈
https://codesandbox.io/s/admiring-diffie-9kfgx?file=/src/App.js
你试过这个吗?
<Route path="/someroute" render={(props) => <SomeComponent {...props} someprop={someprop} />} />
这与挂钩与否无关,它基于 React Router Dom 的工作原理。
如果你不需要match
、location
或history
属性,那么你可以简化你的组件;
<Route path='/someroute'>
<SomeComponent someprop={someprop}/>
</Route>
如果您确实需要这些,那么您可以使用 React Router's hooks in your child component to get them, you can use the render prop of the route. You definitely don't want to try this with the component prop 之一,因为这将在每个渲染中创建一个新组件。
<Route path='/someroute' render={routeProps=><SomeComponent {...routeProps} someprop={someprop}/>} />
另一种方法是使用 withRouter 高阶组件:
//outside of the parent component
const SomeComponentWithRouter = withRouter(SomeComponent);
//In the render function:
<Route path='/someroute'>
<SomeComponentWithRouter someprop={someprop}/>
</Route>
编辑 post 提问者:
- 您显示的渲染标签,是否会导致不必要的重新渲染?我 阅读相关内容。
据我所知,渲染道具不会导致不必要的重新渲染。您可能会想到的是,尝试将 render prop 与 component prop 相同会导致问题:
来自 React Router 的 documentation:
When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).
https://tylermcginnis.com/react-router-pass-props-to-components/
- 而且我必须问,你能post一些初学者友好的参考吗 关于您所说的 'withRouter'?
同样,我必须向您推荐 React Router 的 documentation。它是有关 React Router 的最佳信息来源之一,并且保持最新状态。
withRouter 的主要要点是它是一个 higher order component 并且基本上会为您提供一个始终具有 match
、history
和 [=14] 的组件的新版本=] 传入的道具(匹配基于组件层次结构中第一个匹配的路由)。
关于 withRouter 真的没什么好说的,我有一个如何使用它的例子,它将这 3 个属性添加到你的组件中。
如果您正在使用函数组件,我个人建议使用 React Router 提供的 hooks,因为它们不需要高阶组件。与任何其他挂钩一样,它们可以更轻松地与任何自定义挂钩或函数组件组合。