首页 > 代码库 > react.js

react.js


<
html><head><script src="../build/react.js"></script><script src="../build/react-dom.js"></script><script src="../build/browser.min.js"></script></head><body><div id="test"></div><script type="text/babel">//-------dome1ReactDOM.render(<h1>hellow,word1111!</h1>,document.getElementById(test));</script></body></html>

dome2

// ---------dome2var names = [‘xiaom‘,‘xiaohong‘,‘xiaohei1‘];ReactDOM.render(<div>  {    names.map(function(name){      return <div>hellow,{name}!</div>    })  }</div>,document.getElementById(‘test‘));

dome3

var names=[   <h1>hellow:number 1</h1>,   <h3>hellow:number 2</h3>  ];ReactDOM.render(   <div>{names}</div>,   document.getElementById(‘test‘)  );
** 注意 双标签必须合法 不然会报错 Uncaught SyntaxError: embedded: Unexpected token
结果:
技术分享

dome4:

var HelloClass = React.createClass({    render:function(){        return <h1>hellow:{this.props.name}</h1>;       }});ReactDOM.render( <HelloClass name="liuhulan"/>,document.getElementById(‘test‘));//注意:组建的类的首字母必须大写 !
技术分享

 

dome5 

var TestClass = React.createClass({   render:function(){      return(        <ol>          {            React.Children.map(this.props.children,function(test){              return <li>{test}</li>;            })          }        </ol>     );   }});ReactDOM.render(  <TestClass>  <span>9897878</span>  <span>911111</span>  </TestClass>,  document.getElementById(‘test‘));//  this.props.children    // map  :循环

技术分享

 dome6

 

 

dome7

dome8

dome9

dome10

dome11

dome12

 

react.js