javascript - 您如何从不同的组件更改反应组件的状态？

问题描述

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

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

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

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

应用程序.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

标签： javascriptreactjs

解决方案

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

所以handleClick()函数应该在父组件中，变量的状态本身doWeDisplay也content应该在App。

Body然后，您可以将该函数作为道具传递给它，这样您就可以在Body组件内单击时触发它。clickFunc我在我的例子中调用了那个道具。

最后，您需要做的最后一件事是将当前状态传递给Overlayas props，因此我将doWeDisplayandcontent作为不同的 props 传递，它从App的状态中获取值。

它应该看起来像这样：