在React中向路由器组件传递useState状态。

问题描述 投票:0回答:2

如果是基于类的组件,我可以通过说将状态传递给由道具渲染的组件。

<Route path='/someroute' component={SomeComponent} someprop={someprop} />

然而,现在我使用的是反应钩子,我的状态被定义为:

const [myProjects, setMyProjects] = useState([
     {projectName: Some project, id: 1},
     {projectName: Some project, id: 2},
]);

现在路由忽略了这个道具 我确实读到过一些关于人们使用类似render而不是component的东西。但我觉得这样做所花费的精力和代码量看起来太黑了,还是太多了?我的意思是,引入钩子是为了更好的代码。而现在一个简单的'someprop={someprop}'却要被一个代码块代替?

我也看了一些关于路由器v5有一些新的东西,但是我找不到一个可靠的、干净的传递道具的方法。

谁能给我科普一下这方面的知识?

先谢谢您的时间了!

更新答案

如果你是在上网查询后才来的,这里有一个沙盘与解题方法! 这是根据选定的解决方案answer。其他浏览者也可以查看一下,看看我所面临的问题。也许有人有更多的信息。我还在学习React,天哪,这对我来说是一个很大的学习曲线哈哈。

https:/codesandbox.iosadmiring-diffie-9kfgx?file=srcApp.js。

javascript reactjs react-router react-hooks router
2个回答
1
投票

这与钩子与否无关,这是基于React Router Dom的工作原理。

如果不这样做,你需要 match, locationhistory 道具,那么你可以简化你的组件。

<Route path='/someroute'>
   <SomeComponent someprop={someprop}/>
</Route>

如果你确实需要这些,那么你可以使用其中一个 React Router的钩子 来获取它们,你可以使用你的子组件中的 途径的渲染道具. 你绝对不希望尝试这个与该 部件道具 因为这将在每次渲染中创建一个新的组件。

<Route path='/someroute' render={routeProps=><SomeComponent {...routeProps} someprop={someprop}/>}  />

另一种方法是使用 与路由器 高阶组件。

//outside of the parent component
const SomeComponentWithRouter = withRouter(SomeComponent);

//In the render function:

<Route path='/someroute'>
   <SomeComponentWithRouter someprop={someprop}/>
</Route>

编辑为发帖人提问。

  1. 你所展示的渲染标签,会不会造成不必要的重渲染?我看过一些资料。

据我所知,渲染道具不会引起不必要的重渲染。你可能会想到的是,用组件道具尝试和渲染道具一样的做法会导致问题。

从React Router的 文件:

当你使用组件(而不是render或children,下同)时,路由器会使用React.createElement从给定的组件中创建一个新的React元素。这意味着如果你为组件道具提供一个内联函数,你将在每次渲染时创建一个新的组件。这将导致现有的组件取消挂载,新的组件挂载,而不是仅仅更新现有的组件。当使用内联函数进行内联渲染时,请使用render或children道具(如下)。

https:/tylermcginnis.comreact-router-pass-props-to-components。

Reactjs - Route中的 "component "与 "render "的比较

  1. 我必须问一下,你能不能发一些关于你说的 "withRouter "的初学者友好的参考资料?

再次,我必须向你推荐React Router的 文件. 它是关于React Router的最佳信息来源之一,并保持更新。

withRouter的主要内容是它是一个 高阶部件 并基本上会给你的组件提供一个新的版本,该版本总是有 match, historylocation 传入的道具(匹配是基于组件层次结构中第一个匹配的Route)。

关于withRouter其实也没什么好说的了,我有一个使用的例子,它可以把这3个道具添加到你的组件中。

我个人推荐使用 钩子 如果你正在使用函数组件,React Router提供的钩子,因为它们不需要更高阶的组件。像其他钩子一样,它们可以更容易地与任何自定义钩子或函数组件组成。

https:/css-tricks.comthe-hooks-of-react-router。


0
投票

你试过这个吗?

<Route path="/someroute" render={(props) => <SomeComponent {...props} someprop={someprop} />} />

© www.soinside.com 2019 - 2024. All rights reserved.