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

Question

我是一个新手，无法使用react。我一直在尝试渲染新组件。我有两个由两个不同组件组成的文件。 Fmueditor.js 和 Viewfmu.js。 想要使用 Fmueditor.js 中 VIEW 按钮的单击事件来渲染 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.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

Answer 1

您可以通过管理state变量来简单地显示/隐藏组件。

使用showViewfmu状态变量。

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

处理按钮点击时的状态

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

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

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

你的完整代码应该是这样的......

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

您可以通过另一种方式定义路由，并根据路由加载组件。

希望这对您有用!