如果是基于类的组件,我可以通过说将状态传递给由道具渲染的组件。
<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,天哪,这对我来说是一个很大的学习曲线哈哈。
这与钩子与否无关,这是基于React Router Dom的工作原理。
如果不这样做,你需要 match
, location
或 history
道具,那么你可以简化你的组件。
<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>
编辑为发帖人提问。
据我所知,渲染道具不会引起不必要的重渲染。你可能会想到的是,用组件道具尝试和渲染道具一样的做法会导致问题。
从React Router的 文件:
当你使用组件(而不是render或children,下同)时,路由器会使用React.createElement从给定的组件中创建一个新的React元素。这意味着如果你为组件道具提供一个内联函数,你将在每次渲染时创建一个新的组件。这将导致现有的组件取消挂载,新的组件挂载,而不是仅仅更新现有的组件。当使用内联函数进行内联渲染时,请使用render或children道具(如下)。
https:/tylermcginnis.comreact-router-pass-props-to-components。
Reactjs - Route中的 "component "与 "render "的比较
再次,我必须向你推荐React Router的 文件. 它是关于React Router的最佳信息来源之一,并保持更新。
withRouter的主要内容是它是一个 高阶部件 并基本上会给你的组件提供一个新的版本,该版本总是有 match
, history
和 location
传入的道具(匹配是基于组件层次结构中第一个匹配的Route)。
关于withRouter其实也没什么好说的了,我有一个使用的例子,它可以把这3个道具添加到你的组件中。
我个人推荐使用 钩子 如果你正在使用函数组件,React Router提供的钩子,因为它们不需要更高阶的组件。像其他钩子一样,它们可以更容易地与任何自定义钩子或函数组件组成。
你试过这个吗?
<Route path="/someroute" render={(props) => <SomeComponent {...props} someprop={someprop} />} />