JSX用法

将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(<div>
		 <Item/>
		 <Item/>
		</div>,document.getElementById('example'));
		//上述JSX转化成JS代码
		//JSX中Item是标签形式
		//JS语法中Item是变量形式
		ReactDOM.render(
			React.createElement('div',null,
                              React.createElement(Item),
                              React.createElement(Item)
                        ),document.getElementById('example'));
	    //也可以写成数组的形式
	    ReactDOM.render(
			React.createElement('div',null,
                                  [React.createElement(Item),
                                   React.createElement(Item)]
                        ),document.getElementById('example'));

属性与行内样式：

ReactDOM.render(<div style = {{backgroundColor:'red'}}>
		   <Item/>
		   <Item/>
		</div>,document.getElementById('example'));
		//上述JSX转化成JS代码
		
ReactDOM.render(
	React.createElement('div',{style:{backgroundColor:'red'}},
            React.createElement(Item),
            React.createElement(Item)
         ),document.getElementById('example'));

三目运算与复杂判断：

const bool = true;
ReactDOM.render(<div>
	{bool ? <Item/> : <h1>Hello React!</h1>}  
	</div>,document.getElementById('example'));
//上述JSX转化成JS代码
		
ReactDOM.render(
	React.createElement('div',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(<div>
	         {result}  
	        </div>,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('div',null,result),
	  document.getElementById('example'));