Question

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

模式和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 }/>

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

希望有帮助-卡洛斯（Carlos）

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

1 个答案: