React屬性的3種設置方式

本文轉載自查看原文 2015-12-17 20:53 3607 React

一、

不推薦用setProps，因為以React的設計思想相悖，推薦以父組件向子組件傳遞屬性的方式

二、3種用法的代碼

1.鍵值對

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello, World</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
 9     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var style = {
12             color: "red",
13             border: "1px #000 solid",
14         };
15         var HelloWorld = React.createClass({
16             render: function () { 
17                 return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
18             },
19         });
20         var HelloUniverse = React.createClass({
21             getInitialState: function () {
22                 return {name: ''};
23             },
24             handleChange: function (event) {                
25                 this.setState({name: event.target.value});
26             },
27             render: function () {
28                 return <div>
29                 <HelloWorld name={this.state.name}></HelloWorld>
30                 <br/>
31                 <input type="text" onChange={this.handleChange} />
32                 </div>
33             },
34         });
35         React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);
36     </script>
37 </body>
38 </html>

2.{...props}展開屬性

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello, World</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
 9     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var style = {
12             color: "red",
13             border: "1px #000 solid",
14         };
15         var HelloWorld = React.createClass({
16             render: function () { 
17                 return <p>Hello, {this.props.name1 + ' ' + this.props.name2}</p>;
18             },
19         });
20         var HelloUniverse = React.createClass({
21             getInitialState: function () {
22                 return {
23                     name1: 'Tim',
24                     name2: 'John',
25                 };
26             },
27             handleChange: function (event) {                
28                 this.setState({name: event.target.value});
29             },
30             render: function () {
31                 return <div>
32                 <HelloWorld {...this.state}></HelloWorld>
33                 <br/>
34                 <input type="text" onChange={this.handleChange} />
35                 </div>
36             },
37         });
38         React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);
39     </script>
40 </body>
41 </html>

3.setProps方法

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello, World</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
 9     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var style = {
12             color: "red",
13             border: "1px #000 solid",
14         };
15         var HelloWorld = React.createClass({
16             render: function () { 
17                 return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
18             },
19         });
20         var instance = React.render(<HelloWorld></HelloWorld>, document.body);
21         instance.setProps({name: 'Tim'});
22     </script>
23 </body>
24 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 react之四種組件中DOM樣式設置方式 React: React組件創建的三種方式 react路由傳參(3種方式) react中的ref的3種方式 React性能優化的8種方式 react渲染數據3種方式 Activity設置全屏顯示的兩種方式及系統自帶theme屬性解析 react中路由傳參的三種方式 react方法傳參的兩種方式 react中使用css的2種方式