Question

请考虑以下组件：

1）

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;

2）

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;

3）

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”属性来做到这一点，但是有没有办法在当前设置下实现此目的？

Answer 1

最简单的方法是检查App组件中的channels value with 1并将结果传递到Layout

另一种方法是在路由中包装工具栏调用

3 as channels value

Answer 2

当然。现在，您已经将无状态的组件作为无状态组件进行了管理。现在，当要渲染的Home时，使一个有状态的组件说：（我已经使用了React钩子，因为您已经有一个功能组件）

使用route的渲染道具将道具传递给组件，如下所示：

选项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 中，获取道具并挂载，doesNeedHome(true)

在 HomePage.js 中，doesNeedHome(false)。现在，状态发生了变化并更新了工具栏道具，而家也消失了。

选项2：

使用路由器道具来确定路径位置，而不是在选项1中呈现路线。在 CategoryPage.js 和 HomePage.js 中，获取道具并挂载，doesNeedHome(this.props.location.pathname==='/')或doesNeedHome(this.props.location.pathname==='/home')

其余状态更新与上面相同。

需要在diff文件中相应地重构组件。

如何从父组件中选择性地管理子组件的道具？

2 个答案: