2024年前端最全【React入门必备知识篇03】--- React 组件进阶(1)，史上超级详细

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

)

}

}

ReactDOM.render(

<Hello

name=“rose”

age={19}

colors={[‘red’, ‘green’, ‘blue’]}

fn={() => console.log(‘这是一个函数’)}

tag={

这是一个p标签

}

/>,

document.getElementById(‘root’)

)

---

（3）组件通讯的三种方式

3.1 父组件传递数据给子组件

• 父组件提供要传递的state数据；

• 给子组件标签添加属性，值为state中的数据；

• 子组件中通过props接收父组件中传递的数据；

完整代码演示如下：

import React from ‘react’

import ReactDOM from ‘react-dom’

import ‘./index.css’

/*

props

*/

// 父组件

class Parent extends React.Component {

state = {

lastName: ‘王’

}

render() {

return (

父组件：

)

}

}

// 子组件

const Child = props => {

console.log(‘子组件：’, props)

return (

子组件，接收到父组件的数据：{props.name}

)

}

ReactDOM.render(, document.getElementById(‘root’))

3.2 子组件传递数据给父组件

• 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数；

• 父组件提供一个回调函数，用来接收数据；

• 将该函数作为属性的值，传递给子组件；

• 子组件通过 props 调用回调函数；

<