如何在反应js中将props.children转换为字符串答案

【问题标题】：How to convert props.children to string in react js如何在反应js中将props.children转换为字符串
【发布时间】：2021-02-18 14:14:19
【问题描述】：

我想将反应儿童转换为字符串。在下面的示例中，我将 div、h2 和 p 作为子级传递给 Exampleclass 中的 Example。当我在 Example 中调用 props.children 时，它返回一个数组，但我需要一个字符串格式的 props.children，以便我可以在危险的 SetInnerHTML 中使用它。

import React, { Component } from "react";
import Example from "./example";
export default class Exampleclass extends Component {
  render() {
    return (
      <div>
        <p>in class</p>
        <Example> // passing div, h2 and p as children to Example
          <div>
          <h2>function</h2>
          <p>function</p>
          </div>
        </Example>
      </div>
    );
  }
}

import React from "react";

export default function example(props) {
  console.log("child", props.children); // returns array  but i need <div><h2>function</h2><p>function</p></div> here

  return <div dangerouslySetInnerHTML={{ __html: `${props.children}` }} />;    // returns [object Object]

}

【问题讨论】：

为什么需要使用 dangerouslySetInnerHTML 而没有返回 props.children？
你很可能错误地使用了 React。使用 React 操作 DOM 有更好的方法。
如果您需要将数组转换为字符串，那么 array.toString() 但您正在做的事情并没有使降神会因为很多与用户无关的事情都包含在您需要检查的道具中做

标签： javascript html reactjs dom

【解决方案1】：

很难将children 对象转换为某种具有类似 JSX 结构的扁平字符串。 children 是一个有很多嵌套字段的复杂对象。您必须首先将其转换为 array，然后对其进行迭代，可能是递归的，选择正确的 props 等等。

但是您可以将您的孩子不是作为孩子传递，而是作为单独的道具传递。

const Child = ({ child }) => {
   return <div dangerouslySetInnerHTML={{ __html: child }} />;
};

const App = () => {
  const data = `
     <div>
        <h2>function</h2>
        <p>function</p>
     </div>
  `;

  return <Child child={data} />
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

编辑：但是，您可以使用renderToStaticMarkup 函数，但它只会呈现纯html（它将组件编译成html）。在您的示例中，您只传递了 html 元素，所以我想它会是好的。

const markup = ReactDOMServer.renderToStaticMarkup(children);

return <div dangerouslySetInnerHTML={{ __html: markup }} />;

【讨论】：