Javascript 将数据从子组件传递到不在react中工作的父组件

我正在将数据从我的子组件头组件传递到我的父组件应用程序组件。我的想法是：当我点击页眉组件中的“创建”按钮时，我想将信息发送到应用程序组件以隐藏页眉和页脚。下面是一个代码示例

Header.jsx：

import React, { Component } from 'react';
import { Nav, Navbar, Button } from "react-bootstrap";

class Header extends Component {

constructor(props) {
    super();
    this.state = {
        showHeaderAndFooter: false
    };
}

onChangeChildComponent = () => {
    this.props.changeVisibilityOfHeaderAndFooter(this.state.showHeaderAndFooter);
}

render() {
    return (  
        <Navbar bg="dark" variant="dark">
            <Nav className="mr-auto">
                <Button href="/createGym" onClick={this.onChangeChildComponent.bind(this)}> Create </Button>
            </Nav>           
        </Navbar>
    );
}
}

导出默认标题

App.js：

import React, { Component, Fragment } from 'react';
import './App.css';
import './components/header';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/header';
import Footer from './components/footer';
import Home from './components/home';
import CreateGym from './components/create-gym';
import Login from './components/authentication/login';

class App extends Component {

constructor() {
    super();
    this.state = {
        showHeaderAndFooter: true
    };
}

onChangeChildComponent (showHeaderAndFooter) {
    this.setState(
    {
        showHeaderAndFooter: showHeaderAndFooter
    });
}

Container = () => (
  <div>
      { this.state.showHeaderAndFooter && 
      <Header 
         changeVisibilityOfHeaderAndFooter = {this.onChangeChildComponent.bind(this)}
      />
      } 
      <div className="container">
          <Route exact path='/' component={Home} />
          <Route path="/createGym" component={CreateGym} />
          <Route path="/login" component={Login} />
      </div>
      { this.state.showHeaderAndFooter && <Footer /> } 
  </div>
  )

render() {
    console.log(this.state.showHeaderAndFooter);
    return (
        <BrowserRouter>
            <Switch>
                <Fragment>
                    { <Route component={this.Container}/> }
                </Fragment>
            </Switch>
        </BrowserRouter>  
    );
}
}

export default App;

---

问题是因为我的代码两次进入应用程序构造函数。第一次，一切正常，但第二次，此布尔showHeaderAndFooter再次设置为true，因为这是默认值。你知道怎么解决这个问题吗？

你不应该从孩子>父母那里传来。react是单向的，这意味着数据只能以一种方式流动，而这种方式是向下的

要实现这一点，请将状态移动到父对象中

class Parent extends React = {
   this.state = { showHeaderAndFooter: false }

   functionToToggleShowing = () => {
      this.setState({showHeaderAndFooter: !this.state.showHeaderAndFooter})
   }

  render() {
    return(
        <Child showHeaderAndFooter={this.state.showHeaderAndFooter} functionToToggleShowing={functionToToggleShowing} />
    )
  } 

}

---

这是psedoo代码，但本质上是将状态移动到父级，并将状态传递给子级，以及更改该状态的方法。您不应该从子级传递到父级。react是单向的，这意味着数据只能以一种方式流动，而这种方式是向下的

要实现这一点，请将状态移动到父对象中

class Parent extends React = {
   this.state = { showHeaderAndFooter: false }

   functionToToggleShowing = () => {
      this.setState({showHeaderAndFooter: !this.state.showHeaderAndFooter})
   }

  render() {
    return(
        <Child showHeaderAndFooter={this.state.showHeaderAndFooter} functionToToggleShowing={functionToToggleShowing} />
    )
  } 

}

---

这是PSEDOO代码，但本质上是将状态移动到父级，并将状态传递给子级，以及更改该状态的方法。React允许通过道具将控制权从子级传递到父级

以下是使其工作的三个步骤：

步骤1：在父级中创建一个数据成员，该成员操纵父级状态

步骤2：将父对象的数据成员作为道具发送给子对象

步骤3：在子对象中，调用父对象发送的用于响应事件的道具

下面是使用上述技术将控制权从子项传递给父项的演示：

该示例有两个组件-

父组件是App.jsx 子组件是Header.jsx 父级有一个名为“hideHeader”的状态操作数据成员

父对象将hideHeader作为名为onClick的道具传递给子对象

Child调用父级发送的prop，以响应其onClick事件

父组件-App.jsx

子组件-Header.jsx

输出：

单击“隐藏”按钮之前：

单击“隐藏”按钮后：

---

React允许通过道具将控制权从孩子传递给父母

以下是使其工作的三个步骤：

步骤1：在父级中创建一个数据成员，该成员操纵父级状态

步骤2：将父对象的数据成员作为道具发送给子对象

步骤3：在子对象中，调用父对象发送的用于响应事件的道具

下面是使用上述技术将控制权从子项传递给父项的演示：

该示例有两个组件-

父组件是App.jsx 子组件是Header.jsx 父级有一个名为“hideHeader”的状态操作数据成员

父对象将hideHeader作为名为onClick的道具传递给子对象

Child调用父级发送的prop，以响应其onClick事件

父组件-App.jsx

子组件-Header.jsx

输出：

单击“隐藏”按钮之前：

单击“隐藏”按钮后：

---

谢谢你的回答。我像这样修改了代码，但结果是一样的。当我点击我的创建按钮时，这个布尔值showHeaderAndFooter被设置为false，但之后，它再次将值更改为true。似乎App.js再次将该值覆盖为true。我不知道为什么。。。可能是其他文件中的问题，我不知道。@Nemanja我会注释掉所有的设置状态，然后慢慢地将它们注释回来，以确定错误行为发生的位置谢谢你的回答。我像这样修改了代码，但结果是一样的。当我点击我的创建按钮时，这个布尔值showHeaderAndFooter被设置为false，但之后，它再次将值更改为true。似乎App.js再次将该值覆盖为true。我不知道为什么。。。也许是其他文件中的问题，我不知道。@Nemanja我会注释掉所有设置状态，然后慢慢地注释回来，以确定错误行为发生的位置。我可以看到您的代码正在工作，但在我的项目中仍然有奇怪的行为。。。App.js中的render方法触发了4次！真奇怪。前两次是ok，showHeader是false，但在另外两次是true，我仍然可以在我的项目中看到header。所以，我假设我的问题在另一个地方。。。这不是关于父/子数据传输…我可以看到您的代码正在工作，但在我的项目中仍然有奇怪的行为。。。App.js中的render方法触发了4次！真奇怪。前两次是ok，showHeader是false，但在另外两次是true，我仍然可以在我的项目中看到header。所以，我假设我的问题在另一个地方。。。这不是关于父/子数据传输。。。

import React, { Component } from "react"

export default class Header extends Component {
  render() {
    return (
      <div>
        <h1>Header Demo</h1>

        {/* Call the prop sent by parent when button is clicked */}

        <button onClick={this.props.onClick}>Hide</button>
      </div>
    )
  }
}