前端学习笔记 React (2) 组件,Render,Props

每一个独立或者可重复的部分, 都可以单独定义成一个组件.

Comment.js

import React from 'react';

class Comment extends React.Component {
  render() {
    return (
      <div className="ui comments">
        <div className="content">
          <span className="author">{this.props.author}</span>
          <div className="metadata">
            <span className="date">{this.props.date}</span>
          </div>
          <div className="text">{this.props.children}</span>
        </div>
      </div>
    );
  }
}

export { Comment as default };

CommentList.js

import React from 'react';
import Comment from './Comment.js';

class CommentList extends React.Component {
  render() {
    return (
      <div>
        <Comment author="JustinChou" date="2018-06-22">
          评论内容1
        </Comment>
        <Comment author="JustinChow" date="2018-06-27">
          评论内容2
        </Comment>
      </div>
    );
  }
}

index.html

<!-- ... -->
<div id="app"></div>
<!-- ... -->

main.js

import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';
import CommentList from './CommentList.js';

ReactDOM.render(<CommentList />, document.getElementById('app'));

其中 props 对象的键值在 <> 内的部分直接传递, props.children 参数为<> </> 之间的内容.

上面手工的进行了静态数据的传递, 那么下面进行动态数据传递.

main.js

const comments = [
  { author: 'JustinChou', date: '2018-06-28', text: '评论内容1' },
  { author: 'JustinChow', date: '2018-06-29', text: '评论内容2' }
];

// ...
<CommentList data={comments} />;
// ...

CommentList.js

render() {
	const commentNodes = this.props.data.map(comment => {
		return (
			<Comment author={comment.author} date={comment.date}>{comment.text}</Comment>
		);
	});

	return (
		<div>{commontNodes}</div>
	);
}

服务器获取静态数据:

main.js

const commentsUrl = 'app/comments.json';

<CommentList data={commentsUrl} />;