今天的码农女孩学习了关于react子父组件传值的知识，并做了小练习

子父组件传值
   父组件给子组件传值：父组件下定义属性并赋值，子组件里用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>

相关阅读:
Vue watch computed 生命周期执行顺序
kubernetes安全机制
数学建模论文六大获奖技巧总结（想得奖的进来看）
二叉树的重建问题
Leetcode 637. 二叉树的层平均值
DP:解决路径问题
【博客489】prometheus-----PromQL数据类型与Metrics数据类型
常见仿射变换矩阵
PCL 计算两异面直线公垂线垂足位置
OpenSSL使用总结

原文地址：https://blog.csdn.net/m0_64444606/article/details/125537139