如何在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 (将#修改为@）