结构:
第一层——CommentBox
第二层——CommentList
第三层——Comment
第二层——CommentForm
1、JSX语法:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
CommentBox
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('commentBox')
);
JSX是XML式的语法,预编译器会将语法糖转换成单纯的JavaScript:
var CommentBox = React.createClass({
displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},"CommentBox")
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('commentBox')
);
显而易见,JSX 语法比单纯的JavaScript更加容易使用。
React.createClass() 创建一个新的React组件,组件的方法中最重要的是 render,该方法返回一棵React组件树,这棵树最终将会渲染成 HTML。
<div> 标签不是真实的DOM节点,是 React div 组件的实例化。
ReactDOM.render() 实例化根组件,启动框架,注入到原始的 DOM 元素(第二个参数)中。
2、添加子组件CommentList和CommentForm
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
CommentBox
<CommentList />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
CommentList
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
CommentForm
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('commentBox')
);
3、添加Comment组件并使用props
从父级传来的数据在子组件里作为属性可供使用,可以通过 this.props 访问。通过this.props .*访问传递给组件的命名属性,通过this.props.children 访问任何嵌套的元素。
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>CommentBox</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Alice">This is Alice's comment</Comment>
<Comment author="Bruce">This is Bruce's comment</Comment>
</div>
);
}
});
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h3>{this.props.author}</h3>
{this.props.children}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
CommentForm
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('commentBox')
);
4、添加 Markdown
Markdown 是一种简单的内联格式化文字的方法,如用星号包围的文本将会强调突出。
使用第三方库 remarkable,它接受 Markdown 文本并且转换为原始的 HTML。
调用toString()可以将文本转换成remarkable 能理解的原始字符串。
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>CommentBox</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Alice">This is *Alice's* comment</Comment>
<Comment author="Bruce">This is Bruce's comment</Comment>
</div>
);
}
});
var Comment = React.createClass({
render: function() {
var remarkable = new Remarkable();
return (
<div className="comment">
<h3>{this.props.author}</h3>
{remarkable.render(this.props.children.toString())}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
CommentForm
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('commentBox')
);
问题:星号包围的文本将只是转换成<em>和</em>包裹的内容(<p>This is <em>Alice's</em> comment</p>),而需要的是真正地渲染为 HTML。
解决:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>CommentBox</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Alice">This is *Alice's* comment</Comment>
<Comment author="Bruce">This is Bruce's comment</Comment>
</div>
);
}
});
var Comment = React.createClass({
remark: function() {
var remarkable = new Remarkable();
var remark = remarkable.render(this.props.children.toString());
return { __html: remark };
},
render: function() {
return (
<div className="comment">
<h3>{this.props.author}</h3>
<span dangerouslySetInnerHTML={this.remark()} />
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
CommentForm
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('commentBox')
);
更多推荐
浅谈React实现评论框(一)
发布评论