时间戳

首页 > 解决方案 > 反应如何调用一个道具

javascript - 反应如何调用一个道具

问题描述

我试图在页面加载之前调用组件道具上的方法。为了测试，我创建了一个按钮来调用该方法，但这不是我想要的，我不知道如何更改它，因此当您到达此路径时会立即调用它。

我当前的代码：

class BrokersList extends React.Component {
  getTableData = () => {
    this.props.getBrokerDetails()
  }

  render () {
    return (
      <Paper className={this.props.classes.root}>
        <button 
                variant="outlined" 
                color="primary" 
                onClick={this.getTableData}></button>

          {this.props.details.length > 0 && <Table {...this.props}/>}
      </Paper>

    )
  }
}

我想过getTableData通过render方法调用，但是render应该是纯的所以它不起作用。（Table组件正在从此方法更新的状态中填充）

标签： javascriptreactjs

解决方案

为此，您可以使用componentDidMount生命周期方法。

这是可能对您有用的示例代码。

class BrokersList extends React.Component {
  componentDidMount() {
    this.props.getBrokerDetails()
  }

  render () {
    return (
      <Paper className={this.props.classes.root}>
          {this.props.details.length > 0 && <Table {...this.props}/>}
      </Paper>

    )
  }
}

现在，您的调用getBrokerDetails将在该组件的第一次渲染后立即触发。有关此生命周期方法的更多详细信息，请参见此处。

推荐阅读