Question

说我有一个字符串const s = "I love $FB"，我想得到：

<p>I love <a href="/symbol/FB">$FB</a></p>

的

<RenderContent content={s}>

我可以使用reg来提取符号，但是如何在不使用dangerouslySetInnerHTML的情况下将字符串转换为React组件？

Answer 1

在你的渲染方法中你可以这样做：

<p>{this.props.s.split('$')[0]} 

 <a href="/symbol/{this.props.s.split('$')[1]}">${this.props.s.split('$')[1]}
 </a>
</p>

Answer 2

组件使用正则表达式捕获组的替代渲染函数，但是没有对.exec结果进行验证：

render() {
  const subs = /(^.*)(\$(.*))/.exec(this.props.content);
  return (
    <p>
      { subs[1] }
      <a href={`/symbol/${subs[3]}`}>{subs[2]}</a>
    </p>
  );
}

Answer 3

像这样使用

ReactDOM.render(<RenderContent><p>I love <a href="/symbol/FB">$FB</a></p></RenderContent>, element);

现在在RenderContent组件中使用以下代码：

render(){
   return <div>{this.props.children}</div> //this will render your inner react component

}

如何将字符串解析为React组件？

3 个答案: