父组件向子组件传值
父组件声明属性、方法即可
子组件通过对象解构获取所需属性值
let {a,b} = this.props
render() {
return (
<div>
<input value={this.state.value} onChange={
(e) => {
this.setState({
value: e.target.value
})
}
} />
<button onClick={
() => {
this.onAdd(this.state.value);
this.setState({
value: ''
})
}
}>
提交
</button>
<List1 ref="list" />
</div>
);
}
onAdd = (name) => {
this.refs.list.onAdd(name);
}
子组件向父组件传值
依靠 父组件 传下来的 callback 函数执行,改变 父组件的状态,或者把 child 自己的 state 通知 父组件
setValue = value => {
this.setState({
value,
})
}
<Child setValue = {this.setValue}/>
render() {
this.value = 'haha';
const {setValue} = this.props;
setValue(this.value);
}
父组件声明onChange函数
onChange = value => {
console.log(value)
}
<Child onChange = {this.onChange}/>
render() {
const {onChange} = this.props;
this.setState({
childVal
}), () => {
onChange(this.state.childVal);
}
}
总结:
父组件中会声明一个函数(a)用来接收子组件传值
然后子组件通过父->子组件传值获取父组件中接收值的函数
利用解构赋值 let {a} = this.props;
在子组件调用a方法
a(value);
兄弟组件传值
import React, { Component } from 'react';
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
value: ''
}
}
setValue = value => {
this.setState({
value
})
}
render() {
return (
<div>
{/* 父组件值 */}
{this.state.value}
{/* Son1 组件改变value的值 */}
<Son1 setValue={this.setValue} />
<Son2 value = {this.state.value}/>
</div>
);
}
}
class Son1 extends Component {
render() {
const { setValue } = this.props;
return (
<div>
A组件
{/* change 事件改变父组件中Value的值 */}
<input onChange={
(e) => {
this.value = e.target.value
setValue(this.value)
}
} />
</div>
);
}
}
class Son2 extends Component {
render() {
let {value} = this.props
return (
<div>
{value}
</div>
);
}
}
export default Parent;
上下文取值
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Context extends Component {
constructor() {
super();
this.state = {
value: '',
};
}
setValue = value => {
this.setState({
value,
})
}
getChildContext() {
return {
value: this.state.value,
setValue: this.setValue,
};
}
render() {
return (
<div>
<AParent />
<BParent />
</div>
);
}
}
Context.childContextTypes = {
value: PropTypes.string,
setValue: PropTypes.func,
};
class AParent extends Component {
render() {
return (
<div className="card">
<A />
</div>
);
}
}
class A extends Component {
render() {
const { setValue } = this.context;
return (
<div>
我是parentA 下的 A, <input onChange={
(e) => {
this.value = e.target.value
setValue(this.value)
}
} />
</div>
);
}
}
A.contextTypes = {
setValue: PropTypes.func,
};
class BParent extends Component {
render() {
return (
<div className="card">
<B />
</div>
);
}
}
class B extends Component {
render() {
return (
<div>
我是parentB 下的 B, value是:
{this.context.value}
</div>
);
}
}
B.contextTypes = {
value: PropTypes.string,
};
export default Context;