如何解决如何在React应用程序中启用用户可定制的模板?
我正在尝试在React Web应用程序中启用用户可定制的主题,以便用户可以完全自定义模态窗口的外观,还可以挂接到事件中。
到目前为止,我的工作状况不错:
import React,{ useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import JsxParser from 'react-jsx-parser';
const ModalTheme = ({ data,events }) => (
<JsxParser
bindings={{ ...data,...events }}
blacklistedAttrs={[]}
jsx={`
<div style={{ backgroundColor }}>
<h1>Hello World</h1>
<button onClick={actionHandler}>Change Color</button>
</div>
`}
/>
);
const Modal = () => {
const [themeData,setThemeData] = useState({});
const actionHandler = () => {
setThemeData({ backgroundColor: '#ff0000' });
};
useEffect(() => {
setThemeData({ backgroundColor: '#0000ff' });
},[]);
return (
<div>
<ModalTheme data={themeData} events={{ actionHandler }} />
</div>
);
};
ReactDOM.render(<Modal />,document.getElementById('root'));
在这里,我们有主题数据以及事件处理程序,该事件处理程序传递到ModalTheme
中,该事件处理程序成功地同时使用了两者。
到目前为止,这种方法还不错,尽管我想知道:还有什么其他替代方法可以同时传递和使用主题数据和事件处理程序?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。