React属性传递
属性:属性是在一个组件被声明的时候就被（父组件）赋予的，并且不可以被修改.属性被传递的方式一般是在组件被调用的时候被传,除了可以传递字符串以外,还可以传,对象，数组.
属性的传递主要有两种方法:
1. 属性的设置和传递（键值对设置）:
2. 展开形式设置props
varobj={name:"1",attr:"009"}
如果希望将这个json中的全部数据都放在react中作为组件属性
<ComponentName{...obj}/>
这样就可以实现属性的传递 ,前面加上三点react会把整个obj都放在属性里props面去
例子1:键值对设置:传递字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="lib/react.min.js"></script> <script src="lib/react-dom.min.js"></script> <script src="lib/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ var style={"font-size":"40px", color:"green",width:"200px",height:"300px","text-align":"center",border:"1px solid gray"}; console.log(this.props.name) return ( <div style={style}><span>我出来了!</span> <input type="text" value={this.props.name}/> </div> ) } }) var str="哈哈哈"; ReactDOM.render( <Hello name={str}/>, document.getElementById('example') ); </script> </body> </html> 例子2: 键值对设置:传递对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="lib/react.min.js"></script> <script src="lib/react-dom.min.js"></script> <script src="lib/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ var style={ "font-size":"40px", color:"green", width:"200px", height:"300px", "text-align":"center", border:"1px solid gray" }; console.log(this.props.title) return ( <div style={style}><span>我出来了!</span> <input type="text" value={this.props.title.name}/> </div> ) } }) var str={"name":"小红","age":"18"}; ReactDOM.render( <Hello title={str}/>, document.getElementById('example') ); </script> </body> </html> 例子3: 三点式:传递对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="lib/react.min.js"></script> <script src="lib/react-dom.min.js"></script> <script src="lib/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ var style={ "font-size":"40px", color:"green", width:"200px", height:"300px", "text-align":"center", border:"1px solid gray" }; console.log(this.props) return ( <div style={style}><span>我出来了!</span> <input type="text" value={this.props.age}/> </div> ) } }) var str={"name":"小红","age":"18"}; ReactDOM.render( <Hello {...str}/>, document.getElementById('example') ); </script> </body> </html> 例子4: 三点式:传递数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="lib/react.min.js"></script> <script src="lib/react-dom.min.js"></script> <script src="lib/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ var style={ "font-size":"40px", color:"green", width:"200px", height:"300px", "text-align":"center", border:"1px solid gray" }; console.log(this.props) return ( <div style={style}><span>我出来了!</span> <input type="text" value={this.props[3]}/> </div> ) } }) var str=["xch","xdd","ddd","eee","www"]; ReactDOM.render( <Hello {...str}/>, document.getElementById('example') ); </script> </body> </html>
