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>