如何在父组件中选择性地管理子组件的 props？答案

【问题标题】：How to selectively manage the props of child components from within a parent component?如何在父组件中选择性地管理子组件的 props？
【发布时间】：2019-10-02 06:19:35
【问题描述】：

考虑以下组件：

import React from 'react';

const toolbar = (props) => (
  <header>   
    <nav>
        <ul>
            <li style={{display: props.displayHome}}>Home</li>
            <li>About Us</li>
            <li>Contact</li>
        </ul>
    </nav>   
  </header>
);

export default toolbar;

import React, {Component} from 'react';

import Toolbar from '../../components/Navigation/Toolbar/Toolbar';

class Layout extends Component {
  render() {   
    return (
      <div>
        <Toolbar displayHome={this.props.displayHome}/>
        <main>
          {this.props.children}
        </main>
      </div>
    );
  }
}

export default Layout;

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

import Layout from './hoc/Layout/Layout';
import Homepage from './components/Homepage/Homepage';
import CategoryPage from './containers/CategoryPage/CategoryPage';
import SingleMealPage from './containers/SingleMealPage/SingleMealPage';
import SearchPage from './containers/SearchPage/SearchPage';
import AboutUsPage from './components/AboutUs/AboutUsPage';
import ContactPage from './components/Contact/ContactPage';

class App extends Component {
  render() {
    return (
      <div>
        <Layout>
          <Switch>
            <Route path="/category" component={CategoryPage} />
            <Route path="/singleMeal" component={SingleMealPage} />
            <Route path="/searchResults" component={SearchPage} />
            <Route path="/aboutUs" component={AboutUsPage} />
            <Route path='/contact' component={ContactPage} />
            <Route path="/" component={Homepage} />
          </Switch>
        </Layout>
      </div>
    );
  }
}

export default App;

我想在除主页之外的每个页面上显示“主页”标签。

我显然可以通过在每个相关组件中导入工具栏组件然后单独管理“displayHome”属性来做到这一点，但是有没有办法通过当前设置实现这一点？

【问题讨论】：

标签： reactjs routes switch-statement

【解决方案1】：

在您的情况下，最简单的方法是在 App 组件中检查 (this.props.location.pathname !== '/') 并将结果传递给 Layout

另一种方法是将 Toolbar 调用包装在路由中

class Layout extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={() => <Toolbar displayHome={false} />} />
          <Route path="/*" component={() => <Toolbar displayHome={true} />} />
        </Switch>

        <main>
          {this.props.children}
        </main>
      </div>
    );
  }
}

【讨论】：

我是 React 新手，如果我做错了什么，请原谅我，但第一个选项对我不起作用。当我在 App 组件中console.log(this.props.location.pathname) 时，我得到“无法读取未定义的属性'路径名'”。 console.log(this.props) 给了我一个空数组。但第二个选项就像一个魅力！谢谢老兄。
看起来很奇怪，请确保在render（）内部的return语句中设置断点时检查它......因为这种方式我想在你的情况下更自然
我成功了！事实证明，我必须用 withRouter 包装 App 组件才能访问这些道具，这很奇怪，因为我已经在 index.js 文件中用 BrowserRouter 包装了它。

【解决方案2】：

当然。现在，您已将无状态组件作为无状态组件进行管理。现在制作一个有状态的组件来表示，当 Home 被渲染时：（我使用了反应钩子，因为你已经有了一个函数组件）

使用 route 的 render props 将 props 传递给组件，如下所示：

选项 1：使用渲染道具

const [needsHomeMenu, setNeedsHomeMenu] = useState(false); // you can use this.setState({needsHomeMenu: true}) to achieve.
.
.
.
<Toolbar displayHome={needsHomeMenu}/> //Toolbar depends on this state
.
.
// update state from within the component that propagates to Toolbar
<Route path="/category" render={() => (<CategoryPage doesNeedHome={setNeedsHomeMenu} />)} />

在 CategoryPage.js 中，获取 prop 并在 mount 上，doesNeedHome(true)

在 HomePage.js 中，doesNeedHome(false)。现在，状态改变并更新了 Toolbar 的 props 并且 home 消失了。

选项 2：

使用路由道具来决定路径位置，而不是选项 1 中的路由渲染。在 CategoryPage.js 和 HomePage.js 中，获取 prop 和 on mount ，doesNeedHome(this.props.location.pathname==='/') 或 doesNeedHome(this.props.location.pathname==='/home')

静止状态更新同上。

组件需要在 diff 文件中进行相应的重构。

【讨论】：