JSX用法之将JSX转化成JS代码、JSX中的组件转化成JS形式等操作讲解

将JSX转化成JS代码

ReactDOM.render(  

   <h1>Hello, world!</h1>,  

   document.getElementById('example'));  

//上述JSX转化成JS代码  

ReactDOM.render(  

   React.createElement('h1',null,'Hello, world!'),  

   document.getElementById('example'));  

JSX中的组件转化成JS形式：

const Item =  React.createClass({  

            render: function() {  

              return <h1>Hello World！</h1>;  

            }  

        });  

          

                

ReactDOM.render(  

    <Item/>,  

    document.getElementById('example'));  

//上述JSX转化成JS代码  

//JSX中Item是标签形式  

//JS语法中Item是变量形式  

ReactDOM.render(  

    React.createElement(Item,null,null),  

    document.getElementById('example'));  

JSX转化JS:

ReactDOM.render(<p>  

         <Item/>  

         <Item/>  

        </p>,document.getElementById('example'));  

        //上述JSX转化成JS代码  

        //JSX中Item是标签形式  

        //JS语法中Item是变量形式  

        ReactDOM.render(  

            React.createElement('p',null,  

                              React.createElement(Item),  

                              React.createElement(Item)  

                        ),document.getElementById('example'));  

        //也可以写成数组的形式  

        ReactDOM.render(  

            React.createElement('p',null,  

                                  [React.createElement(Item),  

                                   React.createElement(Item)]  

                        ),document.getElementById('example'));  

属性与行内样式：

ReactDOM.render(<p style = {{backgroundColor:'red'}}>  

           <Item/>  

           <Item/>  

        </p>,document.getElementById('example'));  

        //上述JSX转化成JS代码  

          

ReactDOM.render(  

    React.createElement('p',{style:{backgroundColor:'red'}},  

            React.createElement(Item),  

            React.createElement(Item)  

         ),document.getElementById('example'));  

三目运算与复杂判断：

const bool = true;  

ReactDOM.render(<p>  

    {bool ? <Item/> : <h1>Hello React!</h1>}    

    </p>,document.getElementById('example'));  

//上述JSX转化成JS代码  

          

ReactDOM.render(  

    React.createElement('p',null,  

        bool ? React.createElement(Item) :React.createElement('h1',null,'Hello React!'),  

        ),document.getElementById('example'));  

复杂判断JSX形式：

const bool = true;  

        const result = [];  

        if(bool){  

            result.push(<Item/>);  

            result.push(<Item/>);  

        }else{  

            result.push(<h1>Hello React!</h1>);  

            result.push(<h1>Hello React!</h1>);  

        }  

ReactDOM.render(<p>  

             {result}    

            </p>,document.getElementById('example'));  

复杂判断JS形式：

const bool = true;  

        const result = [];  

        if(bool){  

            result.push(React.createElement(Item));  

            result.push(React.createElement(Item));  

        }else{  

            result.push(React.createElement('h1',null,'Hello React!'));  

            result.push(React.createElement('h1',null,'Hello React!'));  

        }  

          

    ReactDOM.render(  

      React.createElement('p',null,result),  

      document.getElementById('example'));