React快速入门(二)

ReactDOM.render(
    <div class="commentBox">Hello, This is a commentBox!</div>,
    document.getElementById('container')
);

ReactDOM.render(

<div class="commentBox">Hello, This is a commentBox!</div>,

document.getElementById('container')

);

将 commentBox 抽象为一个类，那么代码可以优化为：

var CommonBox = React.createClass({
    render: function(){
        return (
            <div className="commentBox">Hello, This is a commentBox!</div>
        );
    }
});
ReactDOM.render(
    <CommonBox />,
    document.getElementById('content')
);

var CommonBox = React.createClass({

render: function(){

return (

<div className="commentBox">Hello, This is a commentBox!</div>

);

}

});

ReactDOM.render(

<CommonBox />,

document.getElementById('content')

);

注意：原生HTML标签，用小写字母开头；而自定义的React类名要以大写字母开头。

也可以写成如下形式：

var CommonBox = React.createClass({
    displayName: "CommentBox",
    render: function(){
        return (
            React.createElement('div', {
                className: 'commentBox'
            }, "Hello, createElement")
        );
    }
});

ReactDOM.render(
    React.createElement(CommonBox, null),
    document.getElementById('content')
);

var CommonBox = React.createClass({

displayName: "CommentBox",

render: function(){

return (

React.createElement('div', {

className: 'commentBox'

}, "Hello, createElement")

);

}

});

ReactDOM.render(

React.createElement(CommonBox, null),

document.getElementById('content')

);

React 的代码会涉及到 JSX的语法，可以自行查阅。

React组件的创建过程

React.createClass() 会创建一个全新的React组件。其中，最为关键的方法就是 render，它会返回一棵 React 组件树，而这一组件树最终会被渲染为页面上的HTML代码。
这里的HTML标签都不是真正的DOM节点，而是虚拟的节点，React会对其做处理。比如，这里的div不是常规的DOM节点，而是React的div组件的一个实例。React不生成HTML字符串，因此默认阻止了XSS攻击。

ReactDOM.render() 方法，来对组件进行实例化，并将其注入到指定的DOM元素中。

ReactDOM模块提供了一些与DOM相关的方法；
React模块包含了其他的核心工具，比如: React Native

HTML 组件就是普通的 React 组件，就和你定义的组件一样，只不过有一处不同。
JSX 编译器会自动重写 HTML 标签为 React.createElement(tagName) 表达式，其它什么都不做。这是为了避免全局命名空间污染。

组件可以通过 this.props.author，this.props.children 来访问属性。

var CommentList = React.createClass({
    displayName: "CommentList",
    render: function() {
        return (
            <div className="commentList">
                <Comment author="文烈">我觉得前端开发很棒</Comment>
                <Comment author="文烈">我要学习<em>React</em></Comment>
            </div>
            );
    }
});
var Comment = React.createClass({
    render: function() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">{this.props.author}</h2>
                {this.props.children}
            </div>
            );
    }
})

var CommentList = React.createClass({

displayName: "CommentList",

render: function() {

return (

<Comment author="文烈">我觉得前端开发很棒</Comment>

<Comment author="文烈">我要学习<em>React</em></Comment>

</div>

);

}

});

var Comment = React.createClass({

render: function() {

return (

<h2 className="commentAuthor">{this.props.author}</h2>

{this.props.children}

</div>

);

}

})

支持Markdown语法

添加marked支持，需要增加一个marked.min.js

<script src="http://cdn.bootcss.com/marked/0.3.5/marked.min.js"></script>

var CommentList = React.createClass({
    displayName: "CommentList",
    render: function() {
        return (
            <div className="commentList">
                <Comment author="文烈">张文安的评论</Comment>
                <Comment author="文烈">这个是**重要**的内容</Comment>
            </div>
            );
    }
});
var Comment = React.createClass({
    rawMarkup: function() {
        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
        return {__html: rawMarkup};
    }

    render: function() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">{this.props.author}</h2>
                {marked(this.props.children.toString())}
            </div>
            );
    }
})

var CommentList = React.createClass({

displayName: "CommentList",

render: function() {

return (

<Comment author="文烈">张文安的评论</Comment>

</div>

);

}

});

var Comment = React.createClass({

rawMarkup: function() {

var rawMarkup = marked(this.props.children.toString(), {sanitize: true});

return {__html: rawMarkup};

}

render: function() {

return (

<h2 className="commentAuthor">{this.props.author}</h2>

{marked(this.props.children.toString())}

</div>

);

}

})

sanitize:true: 输出的是正常的html标签
sanitize:false: 输出的是经过转义的html标签

联系站长