如何从不同的组件更改反应组件的 state？

Question

我试图了解如何将道具传递给反应中的组件。 我是新手，我一直在努力理解 state 的基本原理。

我想要一个按钮来显示叠加层并暂时用一些任意文本填充该叠加层的“内容”。

我正在尝试使用一个名为 doWeDisplay 的道具作为变量来保存 css 值“无”或“绝对”（隐藏和显示组件）和一个名为“内容”的道具用于覆盖的内容。

这是我的代码，有人可以指出我正确的方向。 我需要那个尤里卡时刻让它点击到位，我的头到处都是试图得到这个。

应用程序.js

import React from 'react';
import Overlay from './components/overlay';
import Header from './components/header';
import Body from './components/body';
import Footer from './components/footer';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    console.log("App props", this.props)
    return (
      <div className="App">
        <Overlay />
        <Header />
        <Body content={ this.props.appContent } />
        <Footer />
      </div>
    );
  }
}

export default App;

正文.js

import React from 'react';
import './body.css';
import Overlay from './overlay'

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      doWeDisplay : "absolute",
      content : "Go on"
    };
  }

  render() {
    function handleClick(e) {
      console.log("Click")
      Overlay.setState((state, props) => ({
        doWeDisplay : "absolute",
        content : "Go on"
      }))
    }
    console.log("Body props ", this.props);
    return (
      <div className="App-Body">
        <p>Here is the body of the page.</p>
        <button onClick={ handleClick }>Click me</button>
      </div>
    );
  }
}

export default Body

覆盖.js

import React from 'react';
import './overlay.css';

class Overlay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      doWeDisplay : props.doWeDisplay,
      content : props.doWeDisplay
    };
  }

  render() {
    console.log("Overlay props " , this.props)
    return (
      <div className="App-Overlay" style={{ display: this.state.doWeDisplay }}>
        { this.state.content }
      </div>
    );
  }
}

export default Overlay

Answer 1

当您有可以更改其他 state 的兄弟组件时，您将需要在父组件中处理该 state（在您的情况下是App ）。

所以handleClick() function应该在父组件中，变量doWeDisplay和content的state本身也应该在App中。

然后，您可以将 function 作为道具传递给Body ，这样您就可以在Body组件中单击时触发它。 在我的示例中，我将该道具称为clickFunc 。

最后，您需要做的最后一件事是将当前的 state 作为道具传递给Overlay ，因此我将doWeDisplay和content作为不同的道具传递，从App的 state 中获取值。

它应该看起来像这样：

应用程序.js

import React from 'react';
import Overlay from './components/overlay';
import Header from './components/header';
import Body from './components/body';
import Footer from './components/footer';
import './App.css';

    class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      doWeDisplay: "absolute",
      content: "Go on"
    };
  }

  handleClick = () => {
    console.log("Click");
    this.setState({
      doWeDisplay: "absolute",
      content: "Go on CHANGED!"
    });
  };

  render() {
    console.log("App props", this.props);
    return (
      <div className="App">
        <Overlay
          doWeDisplay={this.state.doWeDisplay}
          content={this.state.content}
        />
        <Body clickFunc={this.handleClick} content={this.props.appContent} />
      </div>
    );
  }
}

export default App;

正文.js

import React from 'react';
import './body.css';
import Overlay from './overlay'

class Body extends React.Component {
  render() {
    console.log("Body props ", this.props);
    return (
      <div className="App-Body">
        <p>Here is the body of the page.</p>
        <button onClick={() => this.props.clickFunc()}>Click me</button>
      </div>
    );
  }
}

export default Body

覆盖.js

import React from 'react';
import './overlay.css';

class Overlay extends React.Component {
  render() {
    console.log("Overlay props ", this.props);
    return (
      <div className="App-Overlay" style={{ display: this.props.doWeDisplay }}>
        {this.props.content}
      </div>
    );
  }
}

export default Overlay

这是代码框

如何从不同的组件更改反应组件的 state？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-03 00:06:17

如何从不同的组件更改反应组件的 state？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-03 00:06:17

解决方案1
0 已采纳 2020-07-03 00:06:17