我可以将对 React 组件的引用转换为 JSON 代码吗？

Question

我想JSON确定 React 组件的状态并将状态转储到数据库中。我的代码目前看起来像这样：

const [exampleState, setExampleState] = useState([
   {
      componentName: "Test component",
      component: <TestComponent props={testComponentData} />,
   }.
   {
      componentName: "Another test component",
      component: <AnotherTestComponent props={anotherTestComponentData} />
   }
]);

是否可以JSON按原样验证状态，将其存储在数据库中，稍后从数据库中检索数据作为 JSON，然后将其转换回有效状态？

如果不是，建议将此状态转换为我可以存储在数据库中的 JSON 对象并将其从 JSON 对象再次转换回状态的过程是什么？

Answer 1

您或许可以试试 createElement。好久没用了，下面的应该可以用。

const Renderer = () => {
    const item = {
       component: 'TestComponent',
       props: { testComponentData: 'someData' }
    }
    
    const TestComponent = React.lazy(() => import(`./${item.component}`));
    return React.createElement(TestComponent, item.props) //TestComponent should be a component and not a string.
}

我可以将对 React 组件的引用转换为 JSON 代码吗？

Can I convert a reference to a React Component into JSON code?

reactjs

json

typescript

react-state