Question

我正在尝试从要传递对象的组件中访问“道具”。我在这里对JS有点迷茫；基本上，我想做的是构建主视图/详细视图（因此，根据用户在表上的单击来显示/隐藏2个不同的组件）。

一旦用户单击表行，如何从对象rowEvent中访问“道具”？

const rowEvents = {
    onClick: (e, row, rowIndex) => {
      console.log(row.itemId);
      //this.currentItemId= row.itemId;   //////////// THIS DOESNT WORK...
    }
};


const TableWithSearch = (props) => {
    const { SearchBar } = Search;
    const { ExportCSVButton } = CSVExport;

return (
    <Card>
        <CardBody>
            <h4 className="header-title">Search and Export</h4>
            <p className="text-muted font-14 mb-4">A Table</p>

            <ToolkitProvider
                bootstrap4
                keyField="itemId"
                data={props.data}
                columns={columns}
                search
                exportCSV={{ onlyExportFiltered: true, exportAll: false }}>
                {props => (
                    <React.Fragment>
                        <Row>
                            <Col>
                                <SearchBar {...props.searchProps} />
                            </Col>
                            <Col className="text-right">
                                <ExportCSVButton {...props.csvProps} className="btn btn-primary">
                                    Export CSV
                                </ExportCSVButton>
                            </Col>
                        </Row>

                        <BootstrapTable
                            {...props.baseProps}
                            bordered={false}
                            rowEvents={ rowEvents }
                            defaultSorted={defaultSorted}
                            pagination={paginationFactory({ sizePerPage: 5 })}
                            wrapperClasses="table-responsive"
                        />
                    </React.Fragment>
                )}
            </ToolkitProvider>
        </CardBody>
    </Card>
);
};

该组件如下所示：

render() {

    let show;

    if (this.props.currentItemId === null){
        show = (<TableWithSearch data={this.props.data} />)
    }
    else {
        show = (<DisplayItem />)
    }

    return (
        <React.Fragment>
            <Row>
                <Col>
                    { show }
                </Col>
            </Row>
        </React.Fragment>
    )
}
}

Answer 1

this.props应该使您可以访问类组件

此外，您应该创建一个单击函数的绑定，以便它可以在rowEvent的构造函数中正确解析this

Answer 2

您的问题有点复杂，因为您似乎需要从父母的父母那里更新道具currentItemId。

您可以执行以下操作来解决您的问题：

在侧边rowEvents功能组件中移动TableWithSearch个对象的声明。
在TableWithSearch组件中，从父级收到一个回调updateCurrentItemId，该回调会更新父级中的currentItemId
在父组件中，currentItemId从父（再次）传递。因此，为此保持状态。

TableWithSearch组件

const TableWithSearch = (props) => {
  const { SearchBar } = Search;
  const { ExportCSVButton } = CSVExport;
  const {updateCurrentItemId} = props; //<--------- receive the prop callback from parent
  const rowEvents = {
    onClick: (e, row, rowIndex) => {
      console.log(row.itemId);
      updateCurrentItemId(row.itemId) // <--------- use a callback which updates the currentItemId in the parent
      //this.currentItemId= row.itemId;   //////////// THIS DOESNT WORK...
    },
  };
  return (
    <Card>
      <CardBody>
        <h4 className="header-title">Search and Export</h4>
        <p className="text-muted font-14 mb-4">A Table</p>

        <ToolkitProvider
          bootstrap4
          keyField="itemId"
          data={props.data}
          columns={columns}
          search
          exportCSV={{ onlyExportFiltered: true, exportAll: false }}
        >
          {(props) => (
            <React.Fragment>
              <Row>
                <Col>
                  <SearchBar {...props.searchProps} />
                </Col>
                <Col className="text-right">
                  <ExportCSVButton
                    {...props.csvProps}
                    className="btn btn-primary"
                  >
                    Export CSV
                  </ExportCSVButton>
                </Col>
              </Row>

              <BootstrapTable
                {...props.baseProps}
                bordered={false}
                rowEvents={rowEvents}
                defaultSorted={defaultSorted}
                pagination={paginationFactory({ sizePerPage: 5 })}
                wrapperClasses="table-responsive"
              />
            </React.Fragment>
          )}
        </ToolkitProvider>
      </CardBody>
    </Card>
  );
};

父组件

class ParentComp extends React.Component {
    state = {
        curItemId: this.props.currentItemId
    }
    updateCurrentItemId = (udpatedCurId) => {
        this.setState({
            curItemId: udpatedCurId
        })
    }
    render() {

        let show;

        // if (this.props.currentItemId === null){
        if (this.state.curItemId === null){
            show = (<TableWithSearch data={this.props.data} updateCurrentItemId={this.updateCurrentItemId}/>)
        }
        else {
            show = (<DisplayItem />)
        }

        return (
            <React.Fragment>
                <Row>
                    <Col>
                        { show }
                    </Col>
                </Row>
            </React.Fragment>
        )
    }
    }
}

如何从组件内部访问道具

2 个答案: