javascript - react怎么循环输出?
阿神
阿神 2017-04-11 09:52:47
[JavaScript讨论组]

怎么循环输出<ul></ul>中的内容,并且每次输出的内容不一样?

阿神
阿神

闭关修行中......

全部回复(3)
天蓬老师
// tutorial7.js
var Comment = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </p>
    );
  }
});
// tutorial8.js
var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];

// tutorial10.js
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <p className="commentList">
        {commentNodes}
      </p>
    );
  }
});

// tutorial9.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <p className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
      </p>
    );
  }
});

ReactDOM.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

https://facebook.github.io/react/docs/tutorial.html#hook-up-the-data-model

高洛峰

用map做循环

天蓬老师

现在是输出5个星号?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号