Question

当我们从渲染返回null时，该组件只是不显示，而是保持安装状态。我能以某种方式不只是隐藏该组件，就是要拆除它吗？通过ReactDOM.unmountComponentAtNode（）从外部显式卸载的选项不适合。

class SuperComponent extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
    isShow: true
    };
}

onClose = () => this.setState({isShow: false});

render() {
    if (this.state.isShow === false) {
    return null;
}

return (<div>
    <p>Hello</p>
    <button type="button" onClick={this.onClose}>Close</button>
   </div>);
}
}

Answer 1

function ObjetoA(parent){
   parent.showMessage() = function () {
      console.log('HOLA MUNDO');
   }
}

function Objeto(){

   new ObjectoA(this); //this one

   this.sayHiAgain() = function () {
      console.log('HOLA MUNDO OTRA VEZ');
   } 
}

let Prueba = new Objecto();
Prueba.showMessage();// it works

如果这是一个应该在单击时显示的简单模式窗口，并且计划在许多地方使用类似的窗口，那么为了易于使用，您可以实现一个将使用render-props技术的包装器：

const Foo = () => {
  const [shouldShowBar, setShouldShowBar] = useState(true);

  const handleBarClose = useCallback(() => {
    setShouldShowBar(false);
  }, []);

  return (
    <>
      {shouldShowBar && <Bar onClose={handleBarClose} />}
    </>
  );
};

这将不允许在将要使用一个组件的所有组件中产生其状态逻辑。

隐藏组件后如何拆卸？

1 个答案: