reactjs - 如何生成动态 React 标记

Question

我正在尝试将自由文本评论字段的输出转换为格式化组件。我有一个替换字符串数组，我想在文本中替换它们并附加点击处理程序。我正在努力想出一个好的方法，如果可能的话，我真的不想走 dangerouslySetInnerHTML 路线。这是我开始研究但没有取得太大进展的内容:

  const FormattedComment = () => {
    const comment = 'Some info about 1A and 2A... maybe 1A again.';
    const substitutions = ['1A', '2A', '3A'];
    const subPostions: { sub: string; pos: number }[] = [];

    for (const sub of substitutions) {
      // this won't handle duplicates :(
      const pos = comment.indexOf(sub);
      if (pos >= 0) {
        subPostions.push({ sub, pos });
      }
    }

    // do something here (map? forEach?)
  };

希望我能做出这样(或更好)的东西:

  <>
    <span>Some info about </span>
    <strong onClick={() => {}}>1A</strong>
    <span> and </span>
    <strong onClick={() => {}}>2A</strong>
    <span>... maybe </span>
    <strong onClick={() => {}}>1A</strong>
    <span> again.</span>
  </>

任何建议或工作示例将不胜感激。

Answer 1

您需要使用正则表达式来执行此操作。我为它创建了一个沙箱: https://codesandbox.io/s/intelligent-sea-tfxpk?file=/src/App.js

编辑:

我更新了我的解决方案。现在简单多了，效果很好。此外，从性能的角度来看，这是一种更好的方法，因为它不会根据字符串中的所有单词创建数组，而只会根据需要的单词创建数组。

let comment = "Some info about 1A and 2A maybe 1A again.";
  const substitutions = ["1A", "2A", "3A"];

  const parts = comment.split(
    new RegExp(
      String.raw`(\b${String(substitutions).replaceAll(",", "|")}+\b)`,
      "gi"
    )
  );

  for (let i = 1; i < parts.length; i += 2) {
    parts[i] = <strong key={i}>{parts[i]}</strong>;
  }

  return <div className="App">{parts}</div>;