在 React 中将子元素作为道具传递
Posted
技术标签:
【中文标题】在 React 中将子元素作为道具传递【英文标题】：Pass child element as props in React 【发布时间】：2019-05-02 16:32:37 【问题描述】：我正在使用 Gatsby 和 styled-components 构建简单的网站。到目前为止，这是我的导航组件：
const Navigation = () => (
<NavigationContainer>
<List>
<NavItem><StyledLink to='/converter/'>Go to Converter</StyledLink></NavItem>
<NavItem><StyledLink to='/about/'>Go to About</StyledLink></NavItem>
<NavItem><StyledLink to='/'>Go to Main Page</StyledLink></NavItem>
</List>
</NavigationContainer>
)
我想在每个站点上都使用这个组件，但要使用不同的 <NavItem> 文本和链接。我不知道它如何与这个组件一起工作，即：
const About = () => (
<>
<Body>
<Navigation />
</Body>
</>
)
所以在不同的站点上，我希望Navigation 组件具有指向不同页面和文本的链接。是否可以使用props 实现它？
【问题讨论】：
那么你的意思是说要根据传入的props有条件地渲染不同的站点/链接？ 是的。因为在每个站点上，我都希望设置稍微不同的导航链接。例如，在关于页面上，我不想有指向关于页面等的链接。 【参考方案1】：根据我对您要解决的问题的理解，您始终可以使用过滤器功能根据该人当前所在的路线来呈现路线：
const routes = [
to: '/converter/,
message: 'Go to Converter',
,
to: '/about/',
message: 'Go to About',
,
to: '/'
message: 'Go to Main Page',
];
const Navigation = (currentLocation) => (
<NavigationContainer>
<List>
routes.filter(route =>
if (route.to !== currentLocation)
return <NavItem><StyledLink to=route.to>route.message</StyledLink></NavItem>
)
</List>
</NavigationContainer>
)
在这种情况下，您需要确定用户在网站上的当前位置，然后将该属性简单地传递给导航组件。
【讨论】：
谢谢。看起来它应该工作。但我错过了一些东西。如何将currentLocation 定义为 props ？假设我在 About 部分有一个`currentLocation？
这完全取决于您的应用程序的结构以及您可以使用哪些信息。如果您的 About 组件是 Navigation 组件的子组件，则可行的选择是在父组件中创建一个函数，该函数将在路由更改时调用。该调用将在本地设置状态，以便您可以执行过滤器而无需传入属性。另一种选择是监听 location.pathname 的变化，但我不建议不必要地添加监听器
About 页面是 Gatsby 页面，Navigation /> 嵌套在其中。所以它看起来像：const About = () => ( <div> <Navigation /> </div> ) 以上是关于在 React 中将子元素作为道具传递的主要内容，如果未能解决你的问题，请参考以下文章
React.js + Flux -- 在视图中将回调作为道具传递
如何在 React 中将不同的道具从父组件传递给多个子组件？
React-Router-Dom v5.2 ，无法从父级收到的道具中将道具传递给子组件