美文网首页
React (构造和渲染React组件)

React (构造和渲染React组件)

作者: 李逍遥JK | 来源:发表于2018-09-08 23:06 被阅读41次

    1.传统方法(es5)

    
    
    /**
     * 构造组件
     * 我们通过 JavaScript 对象传递一些方法到 React.createClass() 来创建一个新的 React 组件。
     * 其中最重要的方法是 render ,该方法返回一棵 React 组件树,这棵树最终将会渲染成 HTML 。
     * 这里的 <div> 标签不是真正的 DOM 节点;他们是 React div 组件的实例。你可以认为这些标签就是一些标记或者数据, React 知道如何处理它们。React 是安全的。
     * 我们不生成 HTML 字符串,因此默认阻止了 XSS 攻击。
     */
    var CommentList = React.createClass({
        render: function () {
            return(
                <div className='commentList'>
                    Hello, world! I am a CommentList.
                </div>
            );
        }
    })
    

    2.使用es6语法

    /**
    * es6 将组件是为class
    **/
    class Clock extends React.Component{
        render(){
            return(
                <div>
                    <h1>Hello</h1>
                    <h2>现在是{this.props.date.toLocaleTimeString()}</h2>
                </div>
            )
        }
    }
    

    3.渲染 HTML 标签

    // 要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名
    const divElement = <div className="jin"/>;
    ReactDOM.render(
        divElement,
        document.getElementById('content')
    )
    
    

    4.渲染组件

    // 要渲染 React 组件,只需创建一个大写字母开头的本地变量。
    const recElement = React.createClass(
        {/*住宿。。。*/}
    )
    ReactDOM.render(
        <Clock/>,
        document.getElementById('content')
    )
    

    相关文章

      网友评论

          本文标题:React (构造和渲染React组件)

          本文链接:https://www.haomeiwen.com/subject/wzalgftx.html