您的位置：首页 > Web前端 > React

通过表达式、函数给React组件属性赋值

2015-12-15 23:53 711 查看

一、需求

当有传属性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>

　　

三、运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航