[React]JSX的用法

版权声明：本文为博主原创文章，转载请注明出处，谢谢。 https://blog.csdn.net/FreeeLinux/article/details/78761966

什么是JSX

• 基于ECMAScript的一种新特性
• 一种定义带属性树结构的语法

非DOM属性介绍

非DOM属性: dangerouslySetInnerHTML、ref、key

• dangerouslySetInnerHTML: 在JSX中直接插入HTML代码
• ref: 父组件引用子组件
• key: 提高渲染性能

React diff算法

实例演示

var style = {
        color: "red",
        border: "1px solid #000",
    };

    var rawHTML = {
        __html: "<h1>I'm inner HTML</h1>"
    };
    ReactDOM.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>, document.body)

    var style = {
        color: "red",
        border: "1px solid #000",
    };

    var HelloWorld = React.createClass({
        this.refs.childp   //可以通过此方法操做虚拟DOM结点p，此处未完成
        render: function() {
           return <p ref="childp">Hello, World</p>
        },
    });
    ReactDOM.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)

    var style = {
        color: "red",
        border: "1px solid #000",
    };

    var HelloWorld = React.createClass({
        render: function() {
            return <ul>
                <li key="1">1</li>
                <li key="2">2</li>
                <li key="3">3</li>
            </ul>
        }
    });
    ReactDOM.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)