我如何通过使用反应，和/ Next.js数据转换成一个模式？

Question

我有一个表，当用户点击一个行的表我想显示在模式图的行数据。然后，用户将能够编辑这些数据，然后将其更新到服务器。

我使用Next.js建立的网站，我已经尝试了许多不同的解决方案做出反应，但他们都不工作。我找了一个坚实的，简单的解决方案。

Answer 1

我建议在这种情况下使用可重复使用的模态分量，我做这样的事情在我的项目。

这将是一个完全可重用的组件，这是任何东西你传递和转换到这一个模式会包裹。

反应是超级强大的，我们只需要知道如何使用它！

莫代尔成分

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;

好了，不要弄混淆的辅助，这只是其避免增加额外的包装DIV一个HOC

辅助HOC

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

export default Aux;