有没有一种方法可以在字符串文本中呈现动态组件

Question

反应占位符

将包含要放置链接元素的占位符的字符串文本，例如Please Click {0} to enter new Page。 并且{0}将替换为Link元素

预期结果：

在内部说我们想要一个可点击的链接（可能是其他东西/元素）

    Please Click here <a href="https://somenewpage.com"> HERE </a> to enter new Page

  

之所以这样做是为了支持多语言，因为占位符的位置可能会更改为其他位置（例如โปรดกดตรง{0}）

• 解决方法是使用 dangerouslySetInnerHTML 道具和要成为HTML的文本，这是我不想要的。
• 我想到的另一种方法是通过创建一个util来返回文本，以首先通过使用regex模式标识占位符{/ d}来返回JSX元素，然后再相应地追加所需的元素。

  

我只是想知道还有其他方法可以做到这一点吗？

谢谢。

Answer 1

另一种方法是，创建一个新组件HyperLink并使用两个道具进行调用。

class Hyperlink extends React.Component {
  render() {
    return <a href={this.props.link}>{this.props.text}</h2>;
  }
}

然后按如下所示致电Hyperlink

Please Click <Hyperlink link={href} text="HERE"/> to enter new Page