我有一个表,当用户单击表中的一行时,我想在模式图中显示行数据。然后,用户将能够编辑此数据,然后将其更新到服务器。
我正在使用Next.js来构建网站,我尝试了许多不同的React解决方案,但似乎都没有用。我正在寻找可靠,简单的解决方案。
答案 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;