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"
           },
           ...
           ]}
/>

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

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

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

我是否需要一个单独的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 />组件（您创建的组件）。我在这里所做的是简写：

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}

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

2 个答案: