如何获取另一个组件的 prop

Question

我是 React 的新手，我用 Google 搜索了一下，但不知道如何做我想做的事。

我想根据我所在的页面设置不同的 header link 样式。我想知道如何（或者是否可能）获得另一个组件的支持。

到目前为止我的代码：

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>

但我认为一定有更好的方法。

我确定我可以使用 vanilla JavaScript 获得它（也许这就是我应该做的）......但我想知道是否有办法用 Link的道具或类似的东西。

更新我的 Route 的

<Route exact path='/' component={Home}/>
<Route exact path='/About' component={About}/>
<Route exact path='/Other' component={Other}/>

我还注意到 Resume 作为关于 Link 中的 to 道具是不小心的，现在已修复。

Answer 1

好吧，如果你想在 React 中获取另一个组件的 props，你可以使用像 Redux 这样的状态管理工具（这里不需要）或者将组件放在父组件中。 <ParentComponent props={this.state.links} /> //passes down links as a prop for example 然后你可以在你的子组件中访问链接作为道具，比如 this.props.links。如果您不确定它是如何工作的，我建议您观看一些关于传递道具的教程。

Answer 2

我认为您基本上是在以一种可行的方式进行处理，尽管我认为您可以通过使用三元运算符并映射到导航 link 值的数组来避免这种需要。

像这样：

const myLinks = [
  { name: "Home", to: "/" },
  { name: "About", to: "/Resume" },
  { name: "Other", to: "/Other" },
];

const Header = props => (
  <div>
    {myLinks.map((item, i) => (
      <Link
        to={item.to}
        page_name={item.name}
        className={`header-links ${
          props.currentPage === item.name ? " h1" : " h2"
        }`}
      >
        {item.name}
      </Link>
    ))}
  </div>
);

编辑：当然，这是假设一个名为 currentPage 的道具被传递到您的 header 组件中！

Answer 3

您已有的传递静态名称的想法也可以，

<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价格昂贵，不可取。

如何获取另一个组件的 prop

How to get the prop of another component

reactjs

react-props

react-component