reactjs - 用 React 组件替换子字符串

Question

我有一个通过 graphql 查询拉入的 HTML 内容块。在这个文本字符串中，我有形式为 %variable% 的“变量”。 .我需要用动态生成的内容替换变量。最简单的方法是将变量替换为 React 组件的输出。在这种情况下想要使用组件的原因是因为我需要从另一个来源获取数据来替换变量，并且数据会根据不同的输入而改变，所以我不能只用字符串替换字符串。

如果我这样做 content.replace("%variable%,<Component />)我得到:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel lobortis massa. Fusce ac enim ullamcorper, vulputate diam ut, consequat diam. Duis ante odio, suscipit a rhoncus eget, sollicitudin vel nibh. Proin ut urna sed diam dictum commodo sed nec felis. In hac habitasse platea dictumst. Vivamus varius nulla mi, [Object object] convallis lorem aliquam ac. Quisque congue nibh sit amet nisl ultrices gravida. Integer ac lobortis nibh. Donec interdum placerat nibh, eget pharetra tellus rutrum nec. In varius arcu eu luctus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean porttitor orci et eros auctor, at porta dui bibendum. Donec sed consequat felis.

所以， %variable正在被 [Object object] 取代- 不是我希望的......

我查看了对类似查询的其他一些回复，但实际上看不到适用于这种情况的解决方案。

这可能吗？

Answer 1

您可以使用 ReactDOMServer.renderToStaticMarkup 的组合和 dangerouslySetInnerHTML来解决你的情况。

working code demo

---根据评论编辑---
对于多个变量替换，维护变量和组件的映射，如代码片段和演示链接所示

代码片段

const Comp1 = () => (
  <div>
    dynamic component 1 <br />
  </div>
);
const Comp2 = () => (
  <div>
    dynamic component 2 <br />
  </div>
);
const Comp3 = () => (
  <div>
    dynamic component 3 <br />
  </div>
);

const variableToCompMapping = {
  "%variable1%": Comp1,
  "%variable2%": Comp2,
  "%variable3%": Comp3
};

export default function App() {
  const [content, setContent] = useState("");

  useEffect(() => {
    setContent(`
    lorem %variable1% ipsum 
    lorem %variable2% ipsum 
    lorem %variable3% ipsum 
    `);
  }, []);

  const renderContent = () => {
    let result = content;
    for (let dynamicVar in variableToCompMapping) {
      const compAsHtml = ReactDOMServer.renderToStaticMarkup(
        variableToCompMapping[dynamicVar]()
      );
      result = result.replace(dynamicVar, compAsHtml);
    }
    return result;
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        className="content"
        dangerouslySetInnerHTML={{
          __html: renderContent()
        }}
      />
    </div>
  );
}