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

在熟悉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>
    );
}

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

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

我所需要的数据在object

rowInfo.original

中随时可用。现在我的问题是：在执行类似onClick触发器的事件时，使用门户加载模式的“正确”或“最佳实践”方法是什么

我是否需要一个单独的

Modal.js

组件，它实际上是一个门户

如何从该

onRowClick

功能获取传输到此模式门户的数据

---

谢谢大家

您可以有条件地呈现门户，就像它只是另一个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')) }
    )
}

至于实际的

组件，您可以随意制作，也可以使用，或者只构建自己的组件

示例custom Modal.js：

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

---

注意ReactDOM.createPortal是react dom not react中的一个函数

---

从“react dom”导入{createPortal}

感谢您花时间回复！所以，我有一个关于最后一行代码的问题。对于this.state.showmodel正在做什么，我有点困惑，但对于第二部分，似乎这就是实际模态组件的装载方式（通过将其传递到React.createPortal）。我想得对吗？我假设你要把它传递给“body”元素？如果我有一个“模态根”的id，这就是我要传递的吗**编辑：你能给我举一个模态组件本身的例子吗？@Lukon更新了答案。如果你还有问题，请告诉我！非常感谢。所以我给了它一个镜头，当我点击该行时，似乎没有显示模式，而且我没有从React中得到任何错误。我的onRowClick函数与您的相同，模态和css样式也是如此。我唯一修改的是：{this.state.showmodel&&ReactDOM.createPortal（，document.getElementById（'modal-portal'））}。这是不对的吗？我真的很感谢你的帮助！我还尝试了：const modalRoot=document.getElementById（'modal-portal'）并将其传递到createPortal函数中，但问题相同。当我尝试“body”时，我收到一个“body”未定义错误。很抱歉，yes

body

无效。您可以尝试

document.body

，但在index.html页面中创建id为

modal portal

的div会更好。然后将该节点作为最后一个参数传递给

createPortal

。我也只是给出了模态的示例代码，没有任何工作。我将更新到工作示例。我不确定你还想要什么不确定你需要什么Billa。我只是指出使用createPortal的正确方法。

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

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

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