我是 React 新手,我在 Google 上搜索过,但不知道如何做我想做的事情。
我想根据我所在的页面设置不同的标题链接样式。我想知道如何(或者如果可能)获得另一个组件的 Prop 。
到目前为止我的代码:
class Header extends React.Component {
getClass() {
console.log(this.props.currentPage) // Prints the correct value
let headerType = "h2";
if (this.props.currentPage === /*Prop of current Link*/){
headerType = "h1"
}
return ("header-links " + headerType);
}
render() {
return (
<Link to="/" page_name="Home" className={this.getClass()}>Home</Link>
<Link to="/About" page_name="About" className={this.getClass()}>About</Link>
<Link to="/Other" page_name="Other" className={this.getClass()}>Other</Link>
);
}
}
有什么方法可以获取调用 getClass()
的 Link
的 page_name
吗?
我知道我可以将页面名称传递给 getClass()
:
<Link to="/" className={this.getClass("Home")}>Home</Link>
但我认为一定有更好的方法。
我确信我可以使用普通 JavaScript 来获取它(也许这就是我应该做的)...但我想知道是否有一种方法可以使用 Link
来完成此任务> 的 Prop 或类似的东西。
更新
我的路线
<Route exact path='/' component={Home}/>
<Route exact path='/About' component={About}/>
<Route exact path='/Other' component={Other}/>
我还注意到我无意中将 Resume 作为 About Link
中的 to
属性,现已修复。
最佳答案
您已有的传递静态名称的想法也将起作用,
<Link to="/" className={this.getClass("Home")}>Home</Link>
或者你可以简化这个,(我建议使用这个)
<Link to="/" className={"header-links " + (this.props.currentPage === "Home" ? "h1" : "h2")}>Home</Link>
<Link to="/About" className={"header-links " + (this.props.currentPage === "About" ? "h1" : "h2")}>About</Link>
<Link to="/Other" className={"header-links " + (this.props.currentPage === "Other" ? "h1" : "h2")}>Other</Link>
或者另一种方法是在Route's
中传递props
,
<Route exact path='/' component={() => <Home page_name="Home" />}/>
<Route exact path='/About' component={() => <About page_name="About" />}/>
<Route exact path='/Other' component={() => <Other page_name="Other" />}/>
现在在您的 Header
组件中您可以执行此操作,
getClass() {
console.log(this.props.currentPage) // Prints the correct value
let headerType = "h2";
if (this.props.currentPage === this.props.page_name){ //get page_name passed from Route's
headerType = "h1"
}
return ("header-links " + headerType);
}
通过在Route's
中传递props
,您需要进行prop-drilling
。
<Header currentPage="Home" page_name={this.props.page_name} /> //Also need to do for other components
注意: prop-drilling
成本高昂,不建议使用。
关于reactjs - 如何获取另一个组件的prop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57965812/