react用正则匹配字符串,并给其添加一个标签，标签无法被浏览器渲染(可点击看例子)

Question

有一段字符串例如：var str ="这是一个 react 项目,没事我就会segmentfault,然后我还会去谷歌";想要在页面展示成:<li>这是一个 react 项目,没事我就会<a href="http://www.segmentfault.com">segmentfault</a>,然后还会去谷歌</li> reactjs:class Showlist extends Component{  render(){    return (<li>        {            this.props.val.replace(/segmentfault/,<List/>)//此处 val 是获取父组件的值,且存在            //另一种写法            this.props.val.replace(/segmentfault/,<a href="http://www.segmentfault.com">segmentfault</a></div>)        }      </li>)  }}class List extends Component{    render(){        return <div dangerouslySetInnerHTML={{__html: '<a href="http://www.segmentfault.com">segmentfault</a></div>'}}/>    }}结果页面输出 <li>这是一个 react 项目,没事我就会[object object],或者直接来 segmentfault</li>