我如何传递格式化的 React Component Props？

Question

有人能告诉我解决这个问题的方法吗？提前致谢！

我有一个组件接收字符串值作为道具。

我想做的是：

将格式化的字符串传递到道具中。

例如：

<Component 
String ={
  `<p>Some text...</p>
   <p>Another text</p>`
}
/>

我曾尝试将值传递给 const，例如：

const value =   `<p>Some text...</p>
   <p>Another text</p>`

<Component String={value} />

输出是一样的：

<p>Some text...</p> <p>Another text</p>

不格式化 HTML 标签。

Answer 1

我的理解是，您想将包含 HTML 标记的字符串传递给组件，并让该组件按原样打印字符串，而不将其格式化为 HTML。你所做的已经是正确的，只需渲染它就可以了：

const Component = ({String}) => {
  return (
    <div>{String}</div>
  )
}

export default function App() {
  const value = `<p>Some text...</p>
   <p>Another text</p>`
  return (
    <div className="App">
      <Component String={value} />
    </div>
  );
}

如果您真的想将其格式化为 HTML，那么这就是您所需要的：

const Component = ({ String }) => {
  return <div>{String}</div>;
};

const Component1 = ({ String }) => {
  return <div dangerouslySetInnerHTML={{ __html: String }} />;
};

export default function App() {
  const value = `<p>Some text...</p>
   <p>Another text</p>`;
  return (
    <div className="App">
      <Component String={value} />
      <br />
      <Component1 String={value} />
    </div>
  );
}

Component1 将为您格式化。

沙盒：https://codesandbox.io/s/unruffled-currying-v9srx?file=/src/App.js

Answer 2

我想，你问的是如何从 React 组件中的 props 渲染 html 锥形。为此，您必须使用“dangerouslySetInnerHTML”。

dangerouslySetInnerHTML 是 React 在浏览器中使用“innerHTML”的替代品 DOM。因此，您可以直接从 React 设置 HTML，但您必须输入“dangerouslySetInnerHTML”并传递一个带有“__html”键的对象，以提醒自己这是危险的。例如：

function MyComponent() {
  return <div dangerouslySetInnerHTML={{__html: “<p>Hello!</p>”}} />;
}

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

我如何传递格式化的 React Component Props？

How do i pass a formated React Component Props?

reactjs

react-props

react-component