在React 16中实现隐藏/显示

Question

我正在尝试在$a = "I am a string" $a.gettype().name String $b = "What am I? $a" $b What am I? I am a string $c = 'What am I? $a' $c What am I? $a $d = 'I want to keep my "double quotes" and $dollars$.' $d I want to keep my "double quotes" and $dollars$. 中实现隐藏/显示按钮，如果我单击一个按钮，则它应该显示react 16按钮，如果我单击Card按钮，它应该隐藏{{1 }}按钮，我已经实现了此功能，但是我使用了card道具，这在我尝试card的反应16中不建议使用，但是当我在componentwillReceiveprops中进行static getDerivedStateFromProps时就会调用working js fiddle

在不使用setState的情况下如何获得相同的结果

下面是我的代码

handleclick

Answer 1

不要使它变得复杂，而要使其简单，并在父组件上使用toggleShow，并且仅在显示为true时才安装Notification，而应从父级传递toggleShow作为道具能够从我们的子组件中进行切换

class Test extends React.Component {
  constructor() {
    super();
    this.state = { show: false };
    this.toggleShow = this.toggleShow.bind(this);
  }

  toggleShow() {
    this.setState(prevState => ({ show: !prevState.show }));
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.toggleShow}>show the button</button>
        {this.state.show && <Notification hideNotification={this.toggleShow} />}
      </div>
    );
  }
}

const Notification = ({ hideNotification }) => (
  <div className="test">
    <div>
      <button onClick={hideNotification}>Card</button>
    </div>
  </div>
);

Answer 2

这是使用hooks会使语法真正简洁的情况之一：

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Test = () => {
  const [show, setShow] = useState(false)

  return (
    <div className="App">
      <button onClick={() => { setShow(true) }}>show the button</button>
      {
        show &&
        <Notification handleClick={() => { setShow(false) }}/>
      }
   </div>
  )
}

const Notification = ({handleClick}) => (
   <div className="test">
      <div>
         <button onClick={handleClick}>Card</button>
      </div>
   </div>
)

但该物质类似于https://stackoverflow.com/a/55673710/2417031。

Answer 3

我正在编写两种解决方案，一种使用“打开状态和getDerivedStateFromProps生命周期方法”，另一种不使用“打开状态和getDerivedStateFromProps生命周期方法”。

解决方案1（具有打开状态和getDerivedStateFromProps）：

class Test extends Component {
  state ={
      show: false
  }

  constructor(props) {
    super(props);
    this.closeShow = this.closeShow.bind(this);
  }

  show(){
      this.setState({show: true})
  }



  render() {
      return (
          <div className="App">
              <button onClick={this.show.bind(this)}>show the button</button>
              {this.state.show && <Notification show={true} onClose={this.closeShow}  />}
          </div>
      )
  }

  closeShow(e) {
    e.preventDefault();
    this.setState({show:false});
  }
}

和通知组件为：

class Notification extends Component {
  constructor(props){
        super(props);
        this.state ={
            open: true
        }
    }

    static getDerivedStateFromProps(nextProps, prevState){
        if (nextProps.show !== prevState.open) {
          return {open: nextProps.show};
        }
        return null;

    }

    render(){
        const {onClose} = this.props;
        if(!this.state.open){
            return null
        }

      return (
          <div className="test">
              <div>
                  <button onClick={onClose}>Card</button>
              </div>
          </div>
      )
  }

}

解决方案2（没有打开状态和getDerivedStateFromProps）

只有通知组件需要更改，如下所示：

class Notification extends Component {


    render(){
        const {show, onClose} = this.props;
        if(!show){
            return null
        }

      return (
          <div className="test">
              <div>
                  <button onClick={onClose}>Card</button>
              </div>
          </div>
      )
  }

}

通过解决方案2，我们可以使用无状态组件，因为与状态组件相比，无状态组件可以进行管理并且无状态组件可以快速呈现。无状态组件的代码如下：

const Notification = function(props) {

        const {show, onClose} = props;
        if(!show){
            return null
        }

      return (
          <div className="test">
              <div>
                  <button onClick={onClose}>Card</button>
              </div>
          </div>
      )
}

最好采用第二种解决方案，因为当通过Test组件的“ show”状态变量管理单击按钮的显示状态时，还必须通过Test组件的“ show”管理单击按钮的隐藏状态状态变量。

我给出解决方案1只是为了了解getDerivedStateFromProps生命周期方法。