將道具傳遞給render方法中的組件？

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

如果我很好地理解了您的問題（如果不是這樣，請原諒），您可以通過將屬性包含在視圖render方法中來設置屬性，從而將屬性傳遞給DownloadReportsButton組件。 假設數組是視圖狀態的組成部分，則可以包含DownloadReportsButton ，如下所示：

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

DownloadReportsButton可以作為this.props.fileKeys訪問此信息。
通常，您在包含React組件時指定的屬性將作為組件props訪問。

我選擇了與awsFileKeys不同的屬性名稱，以使屬性-屬性連接清晰可見。 當然，您可以根據需要使用相同的名稱：

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

因此，可以在DownloadReportsButton以this.props.awsFileKeys訪問數據。

希望對您有所幫助-卡洛斯（Carlos）