单击表行时使用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"
           },
           ...
           ]}
/>

现在，这是传递给表格行props并在单击时执行的函数：

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

我需要的数据可以在对象rowInfo.original 。 现在我的问题是：当执行诸如此类onClick触发器的事件时，使用门户网站加载模式的“正确”或“最佳实践”方式是什么？

1. 我是否需要一个单独的Modal.js组件实际上是一个门户？
2. 如何从此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示例 ，您应该查看一下。

编辑2：

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

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-dom'导入{createPortal}