一、需求
當有傳屬性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.name
else
return "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.name
else
return "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>
三、運行結果
