单击 table 行时使用 React 门户显示模态组件（？）

Question

在熟悉 React 的过程中，我在开发人员文档中偶然发现了门户的概念。但是，我很难理解这个门户组件实际上是如何按需呈现的，以及我如何将数据传递给它以填充模式。

目前，我有两个相互交互的组件：View.js 和 DataTable.js。

View.js:

const Example = (props) => {
    console.log(props);
    return (
        <div>
            <TopBar />
            <DeploymentsHeader env={props.match.params.env} />
            <PendingDataTable env={props.match.params.env} />
            <DataTable env={props.match.params.env} />
        </div>
    );
}

现在，对于 DataTable 组件，正在渲染一个 react-table。当用户单击单个行时，我的目标是弹出一个模式（我仍然不清楚如果我使用 React 门户，这是否需要有自己的单独组件）并用数据填充它已经绑定到单独的行（我测试过并且也可以访问）。

代码看起来像这样：

<ReactTable
   data={tableData}
   filterable={true}
   getTrProps={this.onRowClick}
       columns={[
          {
            Header: "Header",
            accessor: "service_name"
           },
           ...
           ]}
/>

现在这是传递给 table 行道具并在点击时执行的函数：

onRowClick = (state, rowInfo) => {
        return {
            onClick: e => {
                console.log('A Tr Element was clicked!');
                console.log(rowInfo.original);
            }
        }
    }

我需要的数据在对象 rowInfo.original 中很容易获得。现在我的问题是：当诸如此 onClick 触发器之类的事件执行时，使用门户加载模式的 'correct' 或 'best-practice' 方式被认为是什么？

我是否需要一个单独的 Modal.js 组件，它实际上是一个门户？
如何从这个 onRowClick 函数获取数据并传输到这个模式门户？

谢谢大家。

Answer 1

您可以有条件地呈现门户，就好像它只是另一个 React 组件一样。首先，您应该将模式分离到它自己的组件中。然后，您可以将项目 ID 或项目存储在状态中并切换以让模式知道何时显示。

onRowClick = (state, rowInfo) => {
    return {
        onClick: e => {
            console.log('A Tr Element was clicked!');
            console.log(rowInfo.original);
            this.setState({
                data: rowInfo.original,
                showModal: true
            });
        }
    }
}

render() {
    return (
        <ReactTable
            data={tableData}
            filterable={true}
            getTrProps={this.onRowClick}
            columns={[
                {
                    Header: "Header",
                    accessor: "service_name"
                },
                ...
            ]}
        />
        {this.state.showModal &&  React.createPortal( <Modal data={this.state.data}>Your Data Goes Here</Modal>, document.getElementById('modal-portal')) }
    )
}

编辑：

他们的 Portal 文档中有一个 Modal example 您应该查看。

编辑 2：

this.state.showModal是你需要添加的状态。您将使用它来有条件地呈现 <Modal /> 组件（您创建的）。我在这里所做的是 shorthand for:

if(this.state.showModal) {
    return React.createPortal(...);
} else {
    return null;
}

至于实际的 <Modal /> 组件，您可以随心所欲地制作它，您可以使用 react modal package, bootstrap modals 或自己构建。

自定义示例 Modal.js:

const Modal = ({ children, data }) => (
    <div className="my-modal">
        {children}
        // Here you can do stuff with data if you want
    </div>
);

CSS:

.my-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

注意ReactDOM.createPortal它是来自 react-dom 的函数，而不是 react

从 'react-dom'

导入 {createPortal}

单击 table 行时使用 React 门户显示模态组件（？）

Using React portals to show a modal component(?) when a table row is clicked

javascript

reactjs

react-modal