React 中，将某一条字符串中的字符替换成组件，然后渲染显示出来，如何替换？

Question

比如有一条字符串如 abcd{1}efadf,

有没有办法 将{1} 替换成一个组件，然后再把替换之后的结果渲染出来？

感谢！

Answer 1

写了一个 demo
https://codepen.io/mugou/pen/...

Answer 2

你可以这样，把字符串分割成数组，把对应的替换为React的组件，然后渲染：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  var str = "abcd{1}efadf";
  var segs = str
    .split(/[{}]/)
    .map(s => (s === "1" ? <div>This is a component</div> : s));
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>{segs}</div>
    </div>
  );
}

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