Javascript 在按钮单击事件上渲染新的react组件

我是一个反应迟钝的新手。我一直在尝试渲染新组件。我有两个由两个不同组件组成的文件。 Fmueditor.js和Viewfmu.js。 要使用Fmueditor.js中的“查看时单击事件”按钮渲染Viewfmu.js组件。 请帮我找出我做错了什么

import Viewfmu from './Viewfmu'
class Fmueditor extends Component {
    constructor(props){
        super(props)
        this.state = {
            message: 'FMU List'
        }
    }
    render() {

        return (
            <div>
                <h1>{this.state.message}</h1>
    <ButtonToolbar>
    <Button variant="primary" onClick ={this._onButtonClick} >VIEW</Button>
    <Button variant="primary">ASSIGN</Button>
    </ButtonToolbar>
                <ListGroup>
  <ListGroup.Item>FMU1</ListGroup.Item>
  <ListGroup.Item variant="primary">FMU2</ListGroup.Item>
  <ListGroup.Item action variant="secondary">FMU3</ListGroup.Item>
            </div>

        )
    }
}

export default Fmueditor

从“./Viewfmu”导入Viewfmu
类Fmueditor扩展组件{
建造师（道具）{
超级（道具）
此.state={
消息：“FMU列表”
}
}
render（）{
返回(
{this.state.message}
看法
分配
FMU1
FMU2
FMU3
)
}
}
导出默认Fmueditor

Viewfmu.js

class Viewfmu extends Component {
    constructor(props){
        super(props)
        this.state = {
            showComponent: false,
        };
        this._onButtonClick = this._onButtonClick.bind(this);
    }
    _onButtonClick() {
        this.setState({
          showComponent: true,
        });
      }
    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
  <Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
     </tbody>
</Table>         
            </div>
        )
    }
}

export default Viewfmu

类视图FMU扩展组件{
建造师（道具）{
超级（道具）
此.state={
showComponent:false，
};
this.\u onButtonClick=this.\u onButtonClick.bind（this）；
}
_onButtonClick（）{
这是我的国家({
showComponent:对，
});
}
render（）{
返回(
{this.state.message}
#
名字
1.
做记号
奥托
@mdo
)
}
}
导出默认视图FMU

您可以通过管理

状态变量来简单地显示/隐藏组件

this.state = {
    message: 'FMU List',
    showViewfmu: false
}

使用状态变量
showViewfmu

this.state = {
    message: 'FMU List',
    showViewfmu: false
}

点击按钮时处理
状态

_onButtonClick(){
    this.setState({showViewfmu: !this.state.showViewfmu});
}

添加以下代码以显示/隐藏组件

{this.state.showViewfmu && <Viewfmu />}

{this.state.showViewfmu&&}



您的完整代码应该如下所示

import Viewfmu from './Viewfmu'
class Fmueditor extends Component {
    constructor(props){
        super(props)
        this.state = {
            message: 'FMU List',
            showViewfmu: false
        }
    }

    _onButtonClick(){
        this.setState({showViewfmu: !this.state.showViewfmu});
    }

    render() {

        return (
         <div>
          <h1>{this.state.message}</h1>
          <ButtonToolbar>
            <Button variant="primary" onClick={this._onButtonClick} >VIEW</Button>
            <Button variant="primary">ASSIGN</Button>
          </ButtonToolbar>
          <ListGroup>
            <ListGroup.Item>FMU1</ListGroup.Item>
            <ListGroup.Item variant="primary">FMU2</ListGroup.Item>
            <ListGroup.Item action variant="secondary">FMU3</ListGroup.Item>
          </ListGroup>
          {this.state.showViewfmu && <Viewfmu />}
        </div>
        )
    }
}

export default Fmueditor

从“./Viewfmu”导入Viewfmu
类Fmueditor扩展组件{
建造师（道具）{
超级（道具）
此.state={
消息：“FMU列表”，
showViewfmu:错误
}
}
_onButtonClick（）{
this.setState（{showViewfmu:！this.state.showViewfmu}）；
}
render（）{
返回(
{this.state.message}
看法
分配
FMU1
FMU2
FMU3
{this.state.showViewfmu&&}
)
}
}
导出默认Fmueditor

另外，您可以定义
路由
，并基于
路由
加载组件

希望这对你有用
 通过管理
状态
变量，可以简单地显示/隐藏组件

this.state = {
    message: 'FMU List',
    showViewfmu: false
}

使用状态变量
showViewfmu

this.state = {
    message: 'FMU List',
    showViewfmu: false
}

点击按钮时处理
状态

_onButtonClick(){
    this.setState({showViewfmu: !this.state.showViewfmu});
}

添加以下代码以显示/隐藏组件

{this.state.showViewfmu && <Viewfmu />}

{this.state.showViewfmu&&}



您的完整代码应该如下所示

import Viewfmu from './Viewfmu'
class Fmueditor extends Component {
    constructor(props){
        super(props)
        this.state = {
            message: 'FMU List',
            showViewfmu: false
        }
    }

    _onButtonClick(){
        this.setState({showViewfmu: !this.state.showViewfmu});
    }

    render() {

        return (
         <div>
          <h1>{this.state.message}</h1>
          <ButtonToolbar>
            <Button variant="primary" onClick={this._onButtonClick} >VIEW</Button>
            <Button variant="primary">ASSIGN</Button>
          </ButtonToolbar>
          <ListGroup>
            <ListGroup.Item>FMU1</ListGroup.Item>
            <ListGroup.Item variant="primary">FMU2</ListGroup.Item>
            <ListGroup.Item action variant="secondary">FMU3</ListGroup.Item>
          </ListGroup>
          {this.state.showViewfmu && <Viewfmu />}
        </div>
        )
    }
}

export default Fmueditor

从“./Viewfmu”导入Viewfmu
类Fmueditor扩展组件{
建造师（道具）{
超级（道具）
此.state={
消息：“FMU列表”，
showViewfmu:错误
}
}
_onButtonClick（）{
this.setState（{showViewfmu:！this.state.showViewfmu}）；
}
render（）{
返回(
{this.state.message}
看法
分配
FMU1
FMU2
FMU3
{this.state.showViewfmu&&}
)
}
}
导出默认Fmueditor

另外，您可以定义
路由
，并基于
路由
加载组件

希望这对你有用
 TypeError:无法读取未定义的_onButtonClickI的属性“setState”，将_onButtonClick（）的函数调用更改为arrow函数，该函数可以工作。非常感谢！但是，我想在Viewfmu渲染时隐藏我的FmuEditor组件。你能帮个忙吗？
TypeError:无法读取未定义的属性“setState”\u onButtonClick
你可以添加
this.\u onButtonClick=this.\u onButtonClick.bind（this）
来修复这个错误。如果要显示隐藏组件，则必须将这两个组件都放在父组件中，然后在那里处理
状态
变量。TypeError:无法读取未定义的_onButtonClickI的属性“setState”，它将_onButtonClick（）的函数调用更改为arrow函数，并且可以工作。非常感谢！但是，我想在Viewfmu渲染时隐藏我的FmuEditor组件。你能帮个忙吗？
TypeError:无法读取未定义的属性“setState”\u onButtonClick
你可以添加
this.\u onButtonClick=this.\u onButtonClick.bind（this）
来修复这个错误。若你们想显示隐藏你们的组件，那个么你们必须把这两个组件都放在父组件中，然后在那个里处理
state
变量。