父组件通过props传递值给子组件
-
父组件传递数据给子组件,为单项数据流
-
props传地址可以为任意类型
-
props可以设置默认值
xxx.defaultProps = { name: '张三' }
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 定义父组件
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
isActive: true
}
// 修改changeActive的this的绑定
this.changeActive = this.changeActive.bind(this)
}
// 编写修改样式的函数
changeActive () {
this.setState({
isActive: !this.state.isActive
})
}
// 返回模板
render () {
return (
<div>
<button onClick={this.changeActive}>修改</button>
<Children isActive={this.state.isActive} />
</div>
)
}
}
// 定义子组件
class Children extends React.Component {
render () {
// 通过父组件传递的isActive在this.props中
const classStr = this.props.isActive ? 'active' : 'noActive'
return (
<div className={classStr}>
我是Children元素
</div>
)
}
}
// 渲染父组件
ReactDOM.render(
<Parent />,
document.getElementById('root')
)
子组件传递父组件
- 子组件调用父组件的函数,从而操作父元素的数据,从而实现数据从子组件传递给父组件
import React from 'react'
import ReactDOM from 'react-dom'
// 定义父组件
class ParentCOM extends React.Component {
constructor (props) {
super(props)
this.state = {
msg: '我是父组件的文本'
}
}
// 渲染函数,返回模板
render () {
return (
<div>
<h1>this.state.msg = {this.state.msg}</h1>
{/* 将函数传递给子组件 */}
<ChildrenCOM setData={this.setData} />
</div>
)
}
// 定义设置msg的函数
setData = (data) => {
this.setState({
msg: data
})
}
}
// 定义子组件
class ChildrenCOM extends React.Component {
render () {
return (
<div>
<button onClick={this.sendDate}>发送数据给父组件</button>
</div>
)
}
sendDate = () => {
// 调用父组件的函数
this.props.setData('我是子组件传递给父组件的文本')
}
}
// 渲染父组件
ReactDOM.render(
<ParentCOM />,
document.getElementById('root')
)