如何解决使用React ref的通用React Bootstrap模式
我正在使用反应表库,当用户单击展开图标时,我希望它使用(react-bootstrap modal)以模态打开表。我需要模态是通用的,并且每次都会获得不同的图形组件,甚至只是常规内容。我想知道这是否是实现此功能的最佳实践。我知道不建议使用React ref,根据react docs,使用此策略的对话框不是一个好地方。但我想不出其他选项,这些选项可以让我动态传递图形组件或任何其他组件。很想听听其他选择。
这是我的模态组件:
const SiteModal = React.forwardRef((props,ref) => {
return (
<Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered ref={ref}
dialogClassName={classes.modalContainer}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Modal heading
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>{props.children}</h4>
</Modal.Body>
</Modal>
);
});
这是我的父组件,也是一个ref元素:
const CollapseEelemet = React.forwardRef((props,ref) => {
const [open,setOpen] = useState(true);
const [modalShow,setModalShow] = useState(false);
return (
<div className={classes.collapseWrapper}>
<div onClick={() => setOpen(!open)} className={classes.collapseTitle} aria-controls={props.id}
aria-expanded={open}>
{props.title}
<span onClick={() => setModalShow(true)} className="icon-launch"></span>
**<SiteModal show={modalShow} onHide={() => setModalShow(false)}>
{props.children}
</SiteModal>**
</div>
<Collapse in={true}>
<div id={props.id} ref={ref}>
{props.children}
</div>
</Collapse>
</div>
);
});
这是我的顶级父母:
const Cost = (props) => {
const renderMainGraph = () => {
const ref = React.createRef();
return (
<div className={classes.mainChartWidget}>
<CollapseEelemet ref={ref} id={constant.mainGraph.id} title={constant.mainGraph.title}>
<LineChartFusion />
<GroupColumnChart />
</CollapseEelemet >
</div>
);
};
return (
<div>{renderMainGraph ()}</div>
);
}
解决方法
您没有正确使用ref
,React.createRef
应该仅在Class组件中使用。
const Cost = (props) => {
const ref = useRef();
return (
<div className={classes.mainChartWidget}>
<CollapseEelemet
ref={ref}
id={constant.mainGraph.id}
title={constant.mainGraph.title}
>
<LineChartFusion />
<GroupColumnChart />
</CollapseEelemet>
</div>
);
}
,
好,所以我显然以错误的方式使用了Ref。我真的根本不需要使用它(仅供参考)仅用于Class组件! 我删除了所有Refs和ForwordRef,然后将任意子代传递给组件。
这是现在的样子:
模式组件:
const SiteModal = (props) => {
return (
<Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter"
centered ref={ref} dialogClassName={classes.modalContainer}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Modal heading
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>{props.children}</h4>
</Modal.Body>
</Modal>
});
扩展组件:
const CollapseEelemet = (props,ref) => {
const [open,setOpen] = useState(true);
const [modalShow,setModalShow] = useState(false);
return (
<div className={classes.collapseWrapper}>
<div onClick={() => setOpen(!open)} className={classes.collapseTitle} aria-
controls={props.id} aria-expanded={open}>
{props.title}
<span onClick={() => setModalShow(true)} className="icon-launch"></span>
**<SiteModal show={modalShow} onHide={() => setModalShow(false)}>
{props.children}
</SiteModal>**
</div>
<Collapse in={true}>
<div id={props.id}>
{props.children}
</div>
</Collapse>
</div>
});
顶级父组件:
const Cost = (props) => {
const renderMainGraph = () => {
return (
<div className={classes.mainChartWidget}>
<CollapseEelemet id={constant.mainGraph.id} title
{constant.mainGraph.title}>
<LineChartFusion />
<GroupColumnChart />
</CollapseEelemet >
</div>
);
};
return (
<div>{renderMainGraph ()}</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。