React属性传递
属性:属性是在一个组件被声明的时候就被(父组件)赋予的,并且不可以被修改.属性被传递的方式一般是在组件被调用的时候被传,除了可以传递字符串以外,还可以传,对象,数组.
属性的传递主要有两种方法:
1. 属性的设置和传递(键值对设置):
2. 展开形式设置props
varobj={name:"1",attr:"009"}
如果希望将这个json中的全部数据都放在react中作为组件属性
<ComponentName{...obj}/>
这样就可以实现属性的传递 ,前面加上三点react会把整个obj都放在属性里props面去
例子1:键值对设置:传递字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
var style={"font-size":"40px",
color:"green",width:"200px",height:"300px","text-align":"center",border:"1px solid gray"};
console.log(this.props.name)
return (
<div style={style}><span>我出来了!</span>
<input type="text" value={this.props.name}/>
</div>
)
}
})
var str="哈哈哈";
ReactDOM.render(
<Hello name={str}/>,
document.getElementById('example')
);
</script>
</body>
</html>
例子2:
键值对设置:传递对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
var style={
"font-size":"40px",
color:"green",
width:"200px",
height:"300px",
"text-align":"center",
border:"1px solid gray"
};
console.log(this.props.title)
return (
<div style={style}><span>我出来了!</span>
<input type="text" value={this.props.title.name}/>
</div>
)
}
})
var str={"name":"小红","age":"18"};
ReactDOM.render(
<Hello title={str}/>,
document.getElementById('example')
);
</script>
</body>
</html>
例子3:
三点式:传递对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
var style={
"font-size":"40px",
color:"green",
width:"200px",
height:"300px",
"text-align":"center",
border:"1px solid gray"
};
console.log(this.props)
return (
<div style={style}><span>我出来了!</span>
<input type="text" value={this.props.age}/>
</div>
)
}
})
var str={"name":"小红","age":"18"};
ReactDOM.render(
<Hello {...str}/>,
document.getElementById('example')
);
</script>
</body>
</html>
例子4:
三点式:传递数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
var style={
"font-size":"40px",
color:"green",
width:"200px",
height:"300px",
"text-align":"center",
border:"1px solid gray"
};
console.log(this.props)
return (
<div style={style}><span>我出来了!</span>
<input type="text" value={this.props[3]}/>
</div>
)
}
})
var str=["xch","xdd","ddd","eee","www"];
ReactDOM.render(
<Hello {...str}/>,
document.getElementById('example')
);
</script>
</body>
</html>