时间戳

首页 > 解决方案 > 我如何传递一个格式化的 React 组件道具？

reactjs - 我如何传递一个格式化的 React 组件道具？

问题描述

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

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

我想做的是：

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

前任：

<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 标签。

标签： reactjsreact-propsreact-component

解决方案

我的理解是您希望将包含 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

推荐阅读