前端-【学习心得】-react3 组件的属性

这节要讲的如何给组件动态加入数据.如下,我们希望在使用Comment依赖的时候让其内容包含自己的属性author

react这样的做法就是实现组件的语义话,让组件更加规范

// tutorial4.js

var CommentList = React.createClass(

{ render: function() { return ( <div className="commentList"> <Comment author="Pete Hunt">This is one comment</Comment> <Comment author="Jordan Walke">This is *another* comment</Comment> </div> ); }

});

 

所以在子组件内部需要更改为:

// tutorial5.js

var Comment = React.createClass(

{ render: function() { return ( <div className="comment"> <h2 className="commentAuthor"> 

{this.props.author} </h2> {this.props.children} </div> ); 

}

});

这样,当父组件调用子组件的时候给其赋予了属性author和内容This is one comment,子组件就可以拿到这个author的属性,至于内容统一作为children,这里就跟xml里面的

子节点一样

 

markdown可以用来格式化文本内容,比如加入强调标签等.

 

首先,导入markdown的依赖库:

<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

 

接下来在React组件中引入

var converter = new Showdown.converter();

var Comment = React.createClass({

  render: function() {

    var rawMarkup = converter.makeHtml(this.props.children.toString());

    return (

      <div className="comment">

        <h2 className="commentAuthor">

          {this.props.author}

        </h2>

        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />

      </div>

    );

  }

});

把属性转化后想让React按照html渲染,必须得加上dangerouslySetInnerHTML,否则因为React会放置Xss攻击而导致按照文本显示

原文地址:https://www.cnblogs.com/wq123/p/4396433.html