react子组件向父组件传参（React数据通信父传子和子传父的使用）
导读：组件中的props 在react中，props的特点是： 1.可以给组件传递任意类型的数据 2.props...
组件中的props
在react中 ，props的特点是：
1.可以给组件传递任意类型的数据
2.props是只读的对象 ，只能够读取属性的值 ，无法修改对象
如过我们强行修改数据 ，会报错 ，告诉我们该属性是只读属性 。
ps:在类组件中 ，如果写了构造函数 ，应该将props传递给super().
否则无法在构造函数中获取到props
函数组件-父传子
子组件.js
const FunCom = (props) => {
return (
<div>
<h2>我是函数组件</h2>
<p>我叫{ props.name}</p>
</div>
)
}
export default FunCom
页面使用
import React from react;
import ReactDOM from react-dom;
<!-- 引入 -->
import FunCom from ./components/FunCom
ReactDOM.render(<FunCom name="李大为"/>, document.getElementById(root))
类组件-父传子
子组件
import React from "react";
class FunCom extends React.Component{
render() {
return (
<div>
<h2>我是函数组件</h2>
<p>我叫{ this.props.name}</p>
</div>
)
}
}
export default FunCom
页面使用
import React from react;
import ReactDOM from react-dom;
<!-- 引入 -->
import FunCom from ./components/FunCom
ReactDOM.render(<FunCom name="李大为"/>, document.getElementById(root))
函数组件与类组件接收参数的区别
函数组件接受参数直接是：props.xxx
类组件接受参数直接是： this.props.xxx
组件可以传递那些值？
可以传递：可以传递数字 ， xxx={19}
html,函数等等....
详细代码如下
父组件
import React from react; //这个是react这个包 ，我们是需要的
import ReactDOM from react-dom; //这个是react的虚拟dom
import FunCom from ./components/FunCom
ReactDOM.render(<FunCom name="李大为" age={19} fn={() => { console.log(我被出发了)}} tag={<h2>我是H2</h2>} />,
document.getElementById(root))
子组件
import React from "react";
class FunCom extends React.Component{
render() {
console.log(this.props)
return (
<div>
<h2>我是函数组件</h2>
<p>我叫{this.props.name}</p>
{ this.props.tag}
</div>
)
}
}
export default FunCom
子组件传递数据父组件
1.父组件提供一个回调函数(用于接受数据)
2.将该函数作为属性的值 ，传递给子组件
儿子组件
import React from "react";
class FunCom extends React.Component{
state = {
msg:儿子给父亲的数据
}
// 将数据传递给父组件
giveFtaher = () => {
this.props.giveChildren(this.state.msg)
}
render() {
return (
<div>
<p>我是函数组件</p>
<button onClick={this.giveFtaher}>给父组件</button>
</div>
)
}
}
export default FunCom
父组件
import React from react; //这个是react这个包 ，我们是需要的
import ReactDOM from react-dom; //这个是react的虚拟dom
import FunCom from ./components/FunCom
class PartentHello extends React.Component {
// 当点击按钮的收 ，子组件会触发这个方法
getMsg = (data) => {
console.log(接收到子组件的数据,data)
}
render() {
return (
<div>
<p>我是主页面</p>
<FunCom giveChildren={ this.getMsg}></FunCom>
</div>
)
}
}
ReactDOM.render(<PartentHello></PartentHello>,document.getElementById(root))
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！