一、需求
当有传属性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>
三、运行结果