|
子父组件传值
?? ? ? 父组件给子组件传值：父组件下定义属性并赋值，子组件里用prop接收，接收的是对象类型
? ? ? ? ? ?//es5写法父组件传值给子组件
? ? ??? ? ? function App(prop){//子
? ? ? ? ?? ? ? ? ? ?return (<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? app {prop.name1}-{prop.age}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>)
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?ReactDOM.render(//父
? ? ? ? ? ? ? ? ? ? ? ? ? ? (<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?react
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<App name1="李四" age="23"/>
? ? ? ? ? ? ? ? ? ? ? ? ? </div>),
? ? ? ? ? ? ? ? ? ? ? ? ?document.getElementById("app")
? ? ? ? ? ? ? ? ? )
?? ?
? ? ? ? ? ? ? ?//es6写法父组件传值给子组件
? ? ? ? ? ? ? ?class App extends React.Component{//子
? ? ? ? ? ? ? ? ? ? ?render(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? return <h1>es6 {this.prop.name1}-{this.prop.age}</h1>
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?ReactDOM.render(//父
? ? ? ? ? ? ? ? ? ? ? ? ?(<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?react
? ? ? ? ? ? ? ? ? ? ? ? ? ? <App name1="李四" age="23"/>
? ? ? ? ? ? ? ? ? ? ? ?</div>),
? ? ? ? ? ? ? ? ? ? ? ?document.getElementById("app")
? ? ? ? ? ? ? ? )
?? ?子组件向父组件传值：子组件定义事件调用自己对象下的函数，在函数里通过调用绑定的属性，在属性下定义父类的函数名称进行调用
? ? ? ? ? ? ? //es6写法子组件给父组件传值
? ? ? ? ? ? ? ?class App extends React.Component{//父
? ? ? ? ? ? ? ? ? ? ? fun1(aa){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert("父类函数被调用了"+aa)
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?render(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?return (<div><Header age="23" foo={this.fun1}></Header></div>)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?}
? ? ? ? ? ? ? class Header extends React.Component{//子
? ? ? ? ? ? ? ? ? ? ? ? fun(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.props.foo("asd")
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?render(){
? ? ? ? ? ? ? ? ? ? ? ? ? return (<div><h1 onClick={this.fun}>点击我</h1></div>)
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ReactDOM.render(
? ? ? ? ? ? ? ? ? ? ? ? (<div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? react
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<App name1="李四" age="23"/>
? ? ? ? ? ? ? ? ? ? ? ?</div>),
? ? ? ? ? ? ? ? ? ? ? ?document.getElementById("app")
? ? ? ? ? ? ? ? )
练习：组件嵌套
? ?? ?父类组件wrap，子类组件header和footer
? ?? ?父类组件下定义两个变量
? ? ??? ?第一个变量图片地址，传给header,imgurl:"img/p1.jpg"?? ?
? ? ??? ?第二个变量传给底部显示在不同标签里,需要遍历
?? ?arr:[ "地址:黑龙江省哈尔滨市",
?? ?"电话:0451-89765943",
?? ?"@2019 HaiKang 黑ICP备06004322号"]
代码如下：
<body>
<div id="app"></div>
<script type="text/babel">
//方法1
var arr=["地址:黑龙江省哈尔滨市",
"电话:0451-89765943",
"@2019 HaiKang 黑ICP备06004322号"
]
var arrs=arr.map(function(value,index,arr){
return value
})
function Wrap(){
return (
<div>
<Header imgurl="img/a.png"></Header>
<Footer array={arrs}></Footer>
</div>
)
}
function Header(prop){
return (
<img src={prop.imgurl}/>
)
}
function Footer(prop){
return(
<p>{prop.array}</p>
)
}
ReactDOM.render(
(<div><Wrap/></div>),
document.getElementById("app")
)
// 方法2
class App extends React.Component{
constructor(props){
super(props)
this.state={
imgurl:"img/a.png",
arr:["地址:黑龙江省哈尔滨市",
"电话:0451-89765943",
"@2019 HaiKang 黑ICP备06004322号"
]
}
}
render(){
return(
<div>
<Header url={this.state.imgurl} />
<Footer txt={this.state.arr}/>
</div>
)
}
}
class Header extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<img src={this.props.url} />
</div>
)
}
}
class Footer extends React.Component{
constructor(props){
super(props)
}
render(){
var list=this.props.txt.map(function(value){
return <p>{value}</p>
})
return (
<div>
{list}
</div>
)
}
}
ReactDOM.render(
(<div><App/></div>),
document.getElementById("app")
)
</script>
</body>
</html>
|