组件拆分到文件
(1)定义,并默认导出组件
import React, { Component } from 'react'
export default class 组件名 extends Component {
render() {
return <div>示例</div>
}
}
(2) 导入组件
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Com from './Com.js'
export default class App extends Component {
render() {
return <div><Com /></div>
}
}
ReactDOM.render(<App />, document.getElementById('root'))
注意 :
- 组件名采用大驼峰命名法
- 组件文件名与组件名一致
组件通讯
组件中的状态是私有的，也就是说，组件的状态只能在组件内部使用，无法直接在组件外使用。其与外界沟通。这个过程就是组件通讯
三种方式
- 父子组件之间
- 兄弟组件之间
- 跨组件层级
props基本使用(父传子)
使用格式
父组件-传入数据
<子组件 自定义属性1={值1} 自定义属性2={值2} .... />
子组件-函数式组件-接收数据
// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
console.log('从父组件中传入的自定义属性被收集在对象:', props)
return (<div>子组件的内容</div>)
}
子组件-类组件-接收数据
// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
render() { return (<div>子组件的内容</div>) }
}
示例:
// 接收数据：
// props 的值就是：{ age: 19 }
function HelloFunc(props) {
return (
<div>接收到数据:{props.name}</div>
)
}
// 传递数据：
// 可以把传递数据理解为调用函数 Hello，即：HelloFunc({ age: 19 })
<HelloFunc age={19} />
// 接收数据：
// class 组件需要通过 this.props 来获取
class HelloClass extends Component {
render() {
return (
<div>接收到的数据:{this.props.age}</div>
)
}
}
// 传递数据：
<HelloClass age={19} />
props的三个注意事项
(1) 可以传递任意数据
props可以传递：数字， 字符串， 布尔类型， 数组， 对象， 函数， jsx
(2)props 是只读对象
只能读取对象中的属性，无法修改
(3)单向数据流
父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据
props的children属性
children属性：表示该组件的子节点，只要组件有子节点，props就有该属性.与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数
组件通讯-子传父
使用步骤
(1)父组件
1.定义一个回调函数fn（将会用于接收数据）
2.将该函数f作为属性的值，传递给子组件
(2)子组件
1.通过 props 获取fn
2.调用fn，并传入将子组件的数据
示例:
父组件提供函数并且传递给子组件
class Parent extends React.Component {
state: {
num: 100
}
f = (num) => {
console.log('接收到子组件数据', num)
}
render() {
return (
<div>
子组件：<Child f={this.f} />
</div>
)
}
}
子组件接收函数并且调用
class Child extends React.Component {
handleClick = () => {
// 调用父组件传入的props，并传入参数
this.props.f(100)
}
return (
<button onClick={this.handleClick}>点我，给父组件传递数据</button>
)
}
组件通讯-兄弟组件
思路
将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态(状态提升)
(1)公共父组件职责：
1.提供共享状态
2.提供操作共享状态的方法
(2)要通讯的子组件只需通过 props 接收状态或操作状态的方法
示例:
parent.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
// 1. 状态提升到父组件
state = {
msg: '',
}
render() {
return (
<div>
<h1>我是App组件</h1>
<Jack say={this.changeMsg}></Jack>
{/* 2. 把状态给子组件显示 */}
<Rose msg={this.state.msg}></Rose>
</div>
)
}
changeMsg = (msg) => {
this.setState({
msg,
})
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
Jack.js
import React, { Component } from 'react'
export default class Jack extends Component {
render() {
return (
<div>
<h3>我是Jack组件</h3>
<button onClick={this.say}>说</button>
</div>
)
}
say = () => {
this.props.say('you jump i look')
}
}
Rose.js
import React, { Component } from 'react'
export default class Rose extends Component {
render() {
return (
<div>
<h3>我是Rose组件-{this.props.msg}</h3>
</div>
)
}
}
组件通讯 -跨级组件通讯
使用Context（上下文）的步骤
- 导入并调用createContext方法，从结果中解构出 Provider, Consumer 组件
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
- 使用Provider组件包裹根组件，并通过value属性提供要共享的数据
return (
<Provider value={ 这里放要传递的数据 }>
<根组件的内容/>
</Provider>
)
- 在任意后代组件中，使用第1步中导出的Consumer组件包裹整个组件
return (
<Consumer>
{
（data） => {
// 这里的形参data 就会自动接收Provider中传入的数据
// console.log(data)
return <组件的内容>
}
}
</Consumer>
)
示例:
建立context.js文件
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }
index.js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Parent from './Parent'
import Uncle from './Uncle'
import './index.css'
import { Provider } from 'context.js'
class App extends React.Component {
state = {
num: 0
}
render () {
return (
<Provider value={{ num: this.state.num }}>
<div>
根组件， num:
{this.state.num}
<Parent />
<Uncle />
</div>
</Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
parent.js
import React from 'react'
import Son from './Son'
export default class Parent extends React.Component {
render () {
return (
<div>
我是parent组件
<Son />
</div>
)
}
}
Uncle.js
import React from 'react'
export default class Uncle extends React.Component {
render () {
return (
<Consumer>
{(data) => {
return <div>我是Uncle组件, {data.num}</div>
}}
</Consumer>
)
}
}
Son.js
import React from 'react'
import { Consumer } from './context'
export default class Son extends React.Component {
render () {
return (
<Consumer>
{(data) => {
return <div onClick={() => {}}>我是son组件{data.num}</div>
}}
</Consumer>
)
}
}
