首页 文章

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

提问于
浏览 次
0

在熟悉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触发器之类的事件时，使用门户加载模式的'correct'或'best-practice'方式是什么？

  • 我是否需要一个单独的 Modal.js 组件，实际上是一个门户网站？

  • 如何将此 onRowClick 函数中的数据传输到此模态门户？

感谢大家 .

javascript reactjs react-modal

2 回答

  • 2

    您可以有条件地呈现门户，就像它只是另一个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或者只是 Build 你自己的组件 .

    示例自定义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%);
}
    回复于
  • 1

    注意ReactDOM.createPortal它的函数来自react-dom没反应

    从'react-dom'导入

    回复于

相关问题