如何在反應 js 中將 props.children 轉換為字符串

Question

我想將反應兒童轉換為字符串。 在下面的示例中，我將 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]

}

Answer 1

將children對象轉換為某種具有類似 JSX 結構的扁平字符串是很困難的。 children是一個復雜的對象，有很多嵌套的字段。 您必須首先將其轉換為array ，然后迭代它，可能是遞歸的，選擇正確的道具等等。

然而，你不能錯過你的孩子是兒童，但作為一個單獨的道具。

 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 }} />;