如何使用React / Next.js将数据传递到Modal中?

时间:2019-02-05 10:55:01

标签: reactjs modal-dialog

我有一个表,当用户单击表中的一行时,我想在模式图中显示行数据。然后,用户将能够编辑此数据,然后将其更新到服务器。

我正在使用Next.js来构建网站,我尝试了许多不同的React解决方案,但似乎都没有用。我正在寻找可靠,简单的解决方案。

1 个答案:

答案 0 :(得分:0)

我建议在这种情况下使用可重复使用的模式组件,在我的项目中这样做。

这将是一个完全可重用的组件,它将包装到您传递的所有内容上,并将其转换为模式。

反应非常强大,我们只需要知道如何使用它即可!!

  

模块组件

import React, { Component } from 'react';

import classes from './Modal.css';
import Aux from '../../../hoc/Auxiliary/Auxiliary';
import Backdrop from '../Backdrop/Backdrop';

class Modal extends Component {

    shouldComponentUpdate ( nextProps, nextState ) {
        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
    }

    render () {
        return (
            <Aux>
                <Backdrop show={this.props.show} clicked={this.props.modalClosed} />
                <div
                    className={classes.Modal}
                    style={{
                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.props.show ? '1' : '0'
                    }}>
                    {this.props.children}
                </div>
            </Aux>
        )
    }
}

export default Modal;
  

背景组件

import React from 'react';

import classes from './Backdrop.css';

const backdrop = (props) => (
    props.show ? <div className={classes.Backdrop} onClick={props.clicked}></div> : null
);

export default backdrop;

不要对辅助功能感到困惑,这只是一个 HOC ,可以避免添加额外的包装div

  

辅助HOC

const Aux = (props) => props.children;

export default Aux;