在渲染方法中将道具传递给组件？

Question

我的渲染方法 (DownloadReportsButton) 中有一个按钮组件，它将触发模式 onClick 并执行 API 调用。

modal 和 API 调用的逻辑已经移到按钮组件，但是我如何将我的数据（一个名为 awsFileKeys 的数组）传递给 DownloadReportsButton 组件执行 API 调用？

我的看法：

render() {

    const {reportJSON} = this.state; 

    const content = (      
      <div className="container">
        <div className="card mb-3">
        <div className="card-header">
              <div className="float-left">
                <i className="fas fa-list mr-1"></i>
                Threat Reports
              </div>
              <div className="float-right">
                <DownloadReportsButton />
              </div>
              </div>            
              <div className="card-body">
              <div className="table-responsive">
              <Busy isBusy={this.state.tableIsBusy}>
                  <ReactTable
                    data={reportJSON}
                    filterable
                    defaultFilterMethod={(filter, row) =>
                    String(row[filter.accessor]) === filter.value}
                    columns={[
                      {
                        id: "checkbox",
                        accessor: "",
                        Cell: ({ original }) => {
                          return (
                            <input
                              type="checkbox"
                              className="checkbox"
                              checked={this.state.selected[original.linkRaw] === true}
                              onChange={() => this.toggleRow(original.linkRaw)}
                            />
                          );
                        },
                        Header: x => {
                          return (
                              <input
                                  type="checkbox"
                                  className="checkbox"
                                  checked={this.state.selectAll === 1}
                                  ref={input => {
                                      if (input) {
                                          input.indeterminate = this.state.selectAll === 2;
                                      }
                                  }}
                                  onChange={() => this.toggleSelectAll()}
                              />
                          );
                      },
                        sortable: false,
                        width: 45
                      },
                      { Header: 'Date', 
                        accessor: 'date', 
                        maxWidth: 120,
                        filterMethod: (filter, rows) =>
                        matchSorter(rows, filter.value, { keys: ["date"] }),
                        filterAll: true},

                      { Header: 'Title', 
                        accessor: 'title',
                        filterMethod: (filter, rows) =>
                        matchSorter(rows, filter.value, { keys: ["title"] }),
                        filterAll: true},

                      { Header: 'Link', 
                        accessor: 'link', 
                        maxWidth: 120},
                    ]}
                    loading={this.state.tableIsBusy}
                  />
              </Busy>
              </div>
            </div>
            <div className="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
          </div>
      </div>
    )

我的按钮组件：

class DownloadReportsButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    }
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(){
    this.setState({isOpen: true});
  }

  closeModal(){   
    this.setState({isOpen: false});
  }

  downloadMultipleReports(e){

    fetch(config.api.urlFor('downloadMultipleReports', { fileKeys: this.state.awsFileKeys }))
    .then((response) => response.json())

    this.closeModal();

  }

  render() {
    return (
      <div>
      <button type="button" className="btn btn-primary" style={{marginLeft: '10px'}} onClick={this.openModal}>Download Selected</button>  
      <Modal
          isOpen         = {this.state.isOpen}
          onRequestClose = {this.closeModal}
          style          = {modalStyle}
          contentLabel   = "Generate Report Input"
        >
          <form data-test-id='GenerateReport-modal-1'>
          <h4 style={{textAlign: "center", marginBottom: "15px"}}>Your files are downloading, please wait...</h4>
          </form>
        </Modal>
      </div>
    );
  }
}


export default DownloadReportsButton

Answer 1

如果我很好地理解了您的问题（如果不是这样，请原谅）您可以通过设置属性将道具传递给 DownloadReportsButton 组件，当您将其包含在您的视图中时 render 方法。假设数组是你的视图状态的一个组件，你可以包含DownloadReportsButton，如下：

<DownloadReportsButton fileKeys={ this.state.awsFileKeys }/>

DownloadReportsButton 可以通过this.props.fileKeys 访问此信息。
通常，您在包含 React 组件时指定的属性将作为组件 props 访问。

我选择了一个不同于awsFileKeys 的道具名称，以使属性道具连接清晰。当然，如果你愿意，你可以使用相同的名字：

<DownloadReportsButton awsFileKeys={ this.state.awsFileKeys }/>

因此在DownloadReportsButton 中以this.props.awsFileKeys 的身份访问数据。

希望它有所帮助 - 卡洛斯