在ReactJS中显示/隐藏组件

我们现在在使用react时遇到了一些问题，但这有点像是我们使用react的一部分

我们应该如何显示/隐藏子组件

我们就是这样编码的（这只是我们组件的片段）

\u单击：函数（）{
如果（$（'#在此处添加'）。为（':empty'））
React.render（，$（'#在此处添加'）[0]）；
其他的
React.unmountComponentAtNode（$（'#在此处添加'）[0]）；
},
render:function（）{
返回(
父级-单击“我”添加子级
)
}

最近我读了一些例子，好像应该是这样的：

getInitialState: function () {
  return { showChild: false };
},
_click: function() {
  this.setState({showChild: !this.state.showChild});
},
render: function() {
  return(
    <div>
      <div onClick={this._click}>Parent - click me to add child</div>
      {this.state.showChild ? <Child /> : null}
    </div>
  )
}

getInitialState:函数（）{
返回{showChild:false}；
},
_单击：函数（）{
this.setState（{showChild:！this.state.showChild}）；
},
render:function（）{
返回(
父级-单击“我”添加子级
{this.state.showChild？：null}
)
}

---

我应该使用React.render（）吗？它似乎停止了各种事情，如

shouldComponentUpdate

以级联到child和

e.stopPropagation

..

我提供了一个遵循第二种方法的工作示例。更新组件的状态是显示/隐藏子级的首选方式

如果您有此容器：

您可以使用现代Javascript（ES6，第一个示例）或经典Javascript（ES5，第二个示例）来实现组件逻辑：

使用ES6显示/隐藏组件

类子级扩展React.Component{
render（）{
返回（我是孩子）；
}
}
类ShowHide扩展了React.Component{
构造函数（）{
超级（）；
此.state={
childVisible:错误
}
}
render（）{
返回(
this.onClick（）}>
家长-单击我以显示/隐藏我的孩子
{
此.state.childVisible
? 
：null
}
)
}
onClick（）{
this.setState（prevState=>（{childVisible:！prevState.childVisible}））；
}
};
React.render（，document.getElementById（'container'）；

使用ES5显示/隐藏组件

var Child=React.createClass({
render:function（）{
返回（我是孩子）；
}
});
var ShowHide=React.createClass({
getInitialState:函数（）{
返回{childVisible:false}；
},
render:function（）{
返回(
家长-单击我以显示/隐藏我的孩子
{
此.state.childVisible
? 
：null
}
)
},
onClick:function（）{
this.setState（{childVisible:！this.state.childVisible}）；
}
});
React.render（，document.body）；

/*eslint disable jsx-a11y/img has alt，类方法使用*/
从“React”导入React，{Component}；
从“道具类型”导入道具类型；
从'src/style/todo style.scss'导入todoStyle；
从“react Router”导入{Router，Route，hashHistory as history}；
从'src/components/Myaccount.jsx'导入Myaccount；
导出默认类Headermenu扩展组件{
构造函数（）{
超级（）；
//初始状态
this.state={open:false}；
}
切换（）{
这是我的国家({
打开：！this.state.open
});
}
componentdidMount（）{
this.menuclickevent=this.menuclickevent.bind（this）；
this.collapse=this.collapse.bind（this）；
this.myaccount=this.myaccount.bind（this）；
this.logout=this.logout.bind（this）；
}
render（）{
返回(
菜单
我的帐户
注销
);
}
menuclickevent（）{
const listmenu=document.getElementById（'listmenu'）；
listmenu.style.display='block'；
}
注销（）{
console.log（“注销”）；
}
我的帐户（）{
history.push（'/myaccount'）；
window.location.reload（）；
}
}

您能否更详细地解释第二种解决方案的问题是什么？这实际上是最好的方法。具有一个状态属性

showChild

，当单击

div

时可以切换该属性。调用

setState

然后重新启动组件。@LarsBlumberg。哦实际上，我还没有第二种解决方案的经验。我只在一个小应用程序中尝试过，似乎很有效。我们一直在使用第一个，因为它是以前教给我们的。但是现在我们遇到了一些问题，比如

stopPropagation

不起作用，或者我们需要在父级上触发

shouldComponentUpdate

时手动更新子级。但我还没有看到任何关于这种“首选方式”的文档，只有各种教程的示例。那么我们应该使用第二种解决方案吗？是的，第二种是更好的选择。React文档和示例不使用JQuery。这些文档有很多很棒的信息@有线电视。好吧，我本可以继续使用

this.refs

的，我只是很快用jQuery写了它。只是完全不要使用jQuery或者尽可能少地使用jQuery。。任何时候操纵DOM，都有可能会对自己做出反应。通常会出现类似以下错误：

无法在根目录下找到组件

这真是太好了。我想实施这一点。但是，如果单击的不是子组件，我还需要删除子组件。“你能告诉我怎么做吗？”拉尔斯布隆伯格是的，我已经问过了。你能帮帮我吗。谢谢你。只是关于三元

什么的注释null，为什么不使用
某物&&（）
？昨天注意到了这一点，我非常喜欢lot@MrMesees我也喜欢这种情况下的&&语法。@LarsBlumberg我是个新手，不了解这个核心概念。如果
是许多不同的
之间共享的组件，那么使用这种设计，每个父级都必须实现显示和隐藏方法，从而产生大量的代码重复。我已经考虑在我的项目中使用
refs
，以避免这个问题（
this.child.current.hide（）getInitialState: function () {
  return { showChild: false };
},
_click: function() {
  this.setState({showChild: !this.state.showChild});
},
render: function() {
  return(
    <div>
      <div onClick={this._click}>Parent - click me to add child</div>
      {this.state.showChild ? <Child /> : null}
    </div>
  )
}

    /* eslint-disable jsx-a11y/img-has-alt,class-methods-use-this */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import todoStyle from 'src/style/todo-style.scss';
import { Router, Route, hashHistory as history } from 'react-router';
import Myaccount from 'src/components/myaccount.jsx';

export default class Headermenu extends Component {

  constructor(){
  super();

  // Initial state
  this.state = { open: false };

}

toggle() {
  this.setState({
    open: !this.state.open
  });
}

  componentdidMount() {
    this.menuclickevent = this.menuclickevent.bind(this);
    this.collapse = this.collapse.bind(this);
    this.myaccount = this.myaccount.bind(this);
    this.logout = this.logout.bind(this);
  }

  render() {
    return (
      <div>

        <div style={{ textAlign: 'center', marginTop: '10px' }} id="menudiv" onBlur={this.collapse}>
          <button onClick={this.toggle.bind(this)} > Menu </button>

          <div id="demo" className={"collapse" + (this.state.open ? ' in' : '')}>
            <label className="menu_items" onClick={this.myaccount}>MyAccount</label>
            <div onClick={this.logout}>
              Logout
            </div>
          </div>

        </div>
      </div>
    );
  }

  menuclickevent() {
    const listmenu = document.getElementById('listmenu');
    listmenu.style.display = 'block';
  }



  logout() {
    console.log('Logout');
  }
  myaccount() {
    history.push('/myaccount');
    window.location.reload();

  }


}