標籤:
一、需求
當有傳屬性name的值時,則顯示Hello "name",否則顯示Hello World
二、4種方式的代碼實現
1.通過三元運算子
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script src="./react-0.13.2/build/react.js"></script> <script src="./react-0.13.2/build/JSXTransformer.js"></script><script type="text/jsx">var style = {color : "red",border: "1px #000 solid",};var HelloWorld = React.createClass({render: function(){return <p>你好,{this.props.name ? this.props.name : "World!"} </p>;}});React.render(<div style={style}><HelloWorld name="李小龍!"></HelloWorld></div>, document.body);</script></body></html>
2.通過變數
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script src="./react-0.13.2/build/react.js"></script> <script src="./react-0.13.2/build/JSXTransformer.js"></script><script type="text/jsx">var style = {color : "red",border: "1px #000 solid",};var HelloWorld = React.createClass({getName : function(){if(this.props.name)return this.props.nameelsereturn "World!"},render: function(){var name = this.getName();return <p>你好, {name}</p>;}});React.render(<div style={style}><HelloWorld name="李小龍!"></HelloWorld></div>, document.body);</script></body></html>
3.直接在屬性調用函數
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script src="./react-0.13.2/build/react.js"></script> <script src="./react-0.13.2/build/JSXTransformer.js"></script><script type="text/jsx">var style = {color : "red",border: "1px #000 solid",};var HelloWorld = React.createClass({getName : function(){if(this.props.name)return this.props.nameelsereturn "World!"},render: function(){return <p>你好, {this.getName()}</p>;}});React.render(<div style={style}><HelloWorld name="李小龍!"></HelloWorld></div>, document.body);</script></body></html>
4.用與運算
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script src="./react-0.13.2/build/react.js"></script> <script src="./react-0.13.2/build/JSXTransformer.js"></script><script type="text/jsx">var style = {color : "red",border: "1px #000 solid",};var HelloWorld = React.createClass({render: function(){return <p>你好, {this.props.name || "World!"}</p>;}});React.render(<div style={style}><HelloWorld name="李小龍!"></HelloWorld></div>, document.body);</script></body></html>
三、運行結果
通過運算式、函數給React組件屬性賦值