阅读:47
👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始,涵盖了React的一切基础,属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
🍭持续更新中~希望大家能够喜欢,系列文章👉React–从基础到实战
🌈博客主页👉codeMak1r的博客
👉关注✨点赞👍收藏📂
在父组件中定义子组件,直接往子组件的标签中放数据,子组件可以在props中拿到。
<script type="text/babel">
// 定义父组件Father
class Father extends React.Component {
state = {
data: [{ id: '001', name: 'codeMak1r', handsome: true }]
}
render() {
return (
<div>
<div style={{ color: 'red', border: '1px solid skyblue', width: '120px' }}>
我是Father组件</div>
// 父组件的state中的data传给子组件
<Son data={this.state.data} />
</div>
);
}
}
// 定义子组件Son
class Son extends React.Component {
render() {
// 从props中拿到父组件传递来的数据
const { data } = this.props
console.log(data)
return (
<div style={{ color: 'skyblue', border: '1px solid orange', width: '400px' }}>
<div>我是Son组件</div>
<ul>
父组件传递给我的数据是:
{
data.map((data) => {
return <li key={data.id}>
姓名:{data.name},ID: {data.id},帅吗?: {data.handsome ? '当然帅!' : '不帅...'}
</li>
})
}
</ul>
</div>
);
}
}
ReactDOM.render(<Father />, document.getElementById('root'))
</script>
在父组件中实现一个自定义方法,传递给子组件的props,用这个自定义方法监听子组件的改变
(类似Vue中的$emit语法糖)
最终拿到子组件的值。
<script type="text/babel">
// 定义父组件Father
class Father extends React.Component {
// 初始化状态
state = {
Father_blog: ''
}
// 实现自定义方法seliver(),监听子组件,接受子组件的blog属性
seliver = (blog) => {
this.setState({ Father_blog: blog });
}
render() {
return (
<div>
<div style={{ color: 'red', border: '1px solid skyblue', width: '400px' }}>
<div>我是Father组件</div>
这是子组件传递给我的数据:{this.state.Father_blog}
</div>
// 向子组件传递用以监听的自定义方法
<Son seliver={this.seliver} />
</div>
);
}
}
class Son extends React.Component {
// 初始化状态
state = {
blog: 'codeMak1r'
}
handleData = () => {
const { blog } = this.state
// 调用父组件传递来的自定义方法seliver(),将blog属性传递给父组件
this.props.seliver(blog)
}
render() {
return (
<div style={{ color: 'skyblue', border: '1px solid orange', width: '400px' }}>
<div>我是Son组件</div>
<button onClick={this.handleData}>点我给父组件传递数据</button>
</div>
);
}
}
ReactDOM.render(<Father />, document.getElementById('root'))
</script>
🍒父传子:直接在子组件标签中传递;子组件在props中接收
🍎子传父:父组件实现一个自定义方法,监听子组件传递过来的参数;子组件在props中向这个自定义方法传递数据给父组件。
在React中父子组件的传值是必须要掌握的,react也给出了很多种组件通信的方式,比如:👬兄弟组件通信,订阅消息,redux等等…本文目前只介绍了父子组件之间的通信方式,后续会在系列专栏中更新更多的组件通信方式以及更多优质的React文章,详情请看专栏(React–从基础到实战)~😊😊
冰冻三尺非一日之寒,学习也是一个持续发力的过程💪💪,希望大家能够在自己的道路上披荆斩棘!
GO WARRIORS!!
回见~