基于触发的事件和传入的道具显示元素

Question

我正在尝试通过直接将道具传递给它来操纵另一个元素，然后让它显示自己。如果我通过true/false.

实时运行代码：

https://codesandbox.io/s/keen-dan-rt0kj

• 我不知道是否有可能拥有一个对象系统，并根据一个事件，告诉父母显示一个孩子。

App.js

import React from "react";
import "./styles.css";
import Content from "./components/Content";

export default class App extends React.Component {
  state = {
    display: false
  };

  render() {
    return (
      <div className="App">
        <button onClick={() => this.setState({ display: !this.state.display })}>
          Display div
        </button>
        <Content display={this.state.display} />
      </div>
    );
  }
}

./components/Content.js：

import React from "react";

export default class Content extends React.Component {
  constructor(props) {
    super();
    this.state = {
      display: props.display
    };
  }

  render() {
    const { display } = this.state;
    return (
      <div
        id="mydiv"
        className="mydiv"
        style={{ display: display ? "block" : "none" }}
      >
        <h3>A simple div</h3>
      </div>
    );
  }
}

目标： 我想基于一个状态，并基于触发的事件，显示一个已经存储在root 中的元素。

编辑：我知道，这存在并且可以使用：import PropTypes from 'prop-types'，但是，我不确定这是一个好的做法，因为它需要一些父组件或其他一些组件来实现props。

---

刚刚尝试过：

应用：

<Content display={this.state.display} content={"Hello World"} />

内容：

<h3>{this.state.content}</h3>

看来，存储在内容state = {content: props.content} 中的传入文本确实会显示出来，而boolean 值不能直接工作。发送bool 有什么问题吗？

Answer 1

在你的内容组件中试试这个

    export default class Content extends React.Component {
      constructor(props) {
        super();
        this.state = {
          
        };
      }
    
      render() {
        return (
         <>
          {this.props.display?(
            <div
            id="mydiv"
            className="mydiv"
            >
            <h3>A simple div</h3>
          </div>
          ):null}
         </>
        );
      }
    }

Answer 2

这可能不起作用的原因是因为您在初始化组件后以不连接显示道具的方式初始化状态。这意味着在 Content 组件被“构造”后，Content 的状态和它的父级没有链接。这是因为constructor() 函数只运行一次来​​初始化状态。

最好的选择是不使用 Content 组件的内部状态。无需使用 display 属性初始化状态，只需在渲染函数中使用 display 属性即可。

尝试这样的方法可能会奏效

import React from "react";

export default class Content extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { display } = this.props;
    return (
      <div
        id="mydiv"
        className="mydiv"
        style={{ display: display ? "block" : "none" }}
      >
        <h3>A simple div</h3>
      </div>
    );
  }
}

我还建议在根目录中使用状态：

import React from "react";
import "./styles.css";
import Content from "./components/Content";

export default class App extends React.Component {
  constructor(props) {
    super();
    state = {
      display: false
    };
  }

  render() {
    return (
      <div className="App">
        <button onClick={() => this.setState({ display: !this.state.display })}>
          Display div
        </button>
        <Content display={this.state.display} />
      </div>
    );
  }
}