将JSX对象转换为字符串

发布于 2025-02-13 18:37:34 字数 1596 浏览 0 评论 0原文

我在.jsx文件中有一个对象，其中包含jsx.ements。我想将其转换为字符串，例如从此转换为：

const data = {
  title: 'Create cat',
  description: 'Creates a new cat',
  react_element: (
    <>
      <span>Create account body here</span>
      <VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" />
    </>
  ),
  generatePrettyReactElement: (args: string) => (
    <>
      <span>Create account body here</span>
      <VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" />
    </>
  ),
};

我

const string = "const data = { title: 'Create cat', description: 'Creates a new cat', react_element: (<> <span>Create account body here</span> <VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" /> </>),generatePrettyReactElement: (args: string) => (<> <span>Create account body here</span><VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" /></>),};"

尝试了json.stringify（data），但随后丢失了jsx.elements，然后我尝试了 https://www.npmjs.com/package/reaect-eleact-element-to-jsx-string ，但它仅适用于JSX.Element，而不是可能包含JSX元素的对象。

原文

I have an object in .jsx file that contains JSX.elements here and there. I want to convert it to string, e.g go from this:

const data = {
  title: 'Create cat',
  description: 'Creates a new cat',
  react_element: (
    <>
      <span>Create account body here</span>
      <VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" />
    </>
  ),
  generatePrettyReactElement: (args: string) => (
    <>
      <span>Create account body here</span>
      <VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" />
    </>
  ),
};

To this:

const string = "const data = { title: 'Create cat', description: 'Creates a new cat', react_element: (<> <span>Create account body here</span> <VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" /> </>),generatePrettyReactElement: (args: string) => (<> <span>Create account body here</span><VideoEmbed title="Youtube sample" description="This is a spiderman meme" videoLink="https://www.youtube.com/embed/FKPiqAFt3Rk" /></>),};"

I've tried JSON.stringify(data) but then it loses JSX.elements, then I've tried https://www.npmjs.com/package/react-element-to-jsx-string but it only works with JSX.Element and not an object that might contain JSX elements.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随遇而安 2025-02-20 18:37:34

您可以为JSON.Stringify函数编写替换器，并为每个JSX元素使用React-Element to-jsx-string。

JSON.stringify(data, (value) => {
  if (React.isValidElement(value)) {
     const result = /// do react element stringification of the element
     return result;
  }

  return value;
})

You can write replacer for JSON.stringify function and use react-element-to-jsx-string for each JSX element.

JSON.stringify(data, (value) => {
  if (React.isValidElement(value)) {
     const result = /// do react element stringification of the element
     return result;
  }

  return value;
})

回复收藏 0 原文

~没有更多了~