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>

Answer 1

replace方法中，你是用一个对象替换了匹配结果，要加引号才是用字符串匹配，改写如下：

render() {
    var dangerHtml = this.props.val.replace(/segmentfault/,"<a href='http://www.segmentfault.com'>segmentfault</a></div>");
    return (
        <li>
          <div dangerouslySetInnerHTML = {{__html: dangerHtml}} />
        </li>
    )

Answer 2

字符串的replace方法用的不对啊，第二个参数是字符串啊，骚年！

this.props.val.replace(/segmentfault/,'<a href="http://www.segmentfault.com">segmentfault</a>')

http://www.w3school.com.cn/js...

如果不是字符串，jsx会把a标签使用React.createElement()创建成对象，然后再调用对象的toString方法，所以才会显示[object object]哈