ReactNative-组件间传值

父传子

1.通过props传值

示例：

// 子组件
class  SonCompoent extends Component{

    render() {
        return (
            <View>
                <Text>{this.props.name}的son</Text>
            </View>
        );
    };
}

// 父组件
class FatherComponet extends Component {
    
    render() {
        return (
            <View>
                <SonCompoent  name={this.props.name}/>
            </View>
        );
    }
}
复制代码

父组件传递某个（比如name）属性给子组件，在父组件中添加name='xxx';子组件则通过this.props.name获取name的值。

子传父

1.通过props回调

示例：

// 子组件
class  SonCompoent extends Component{

    sendName() {
        this.props.getName('Tom');
    }
    render() {
        return (
            <View>
                <Text onPress={this.sendName.bind(this)}>Tom</Text>
            </View>
        );
    };
}

// 父组件
class FatherComponet extends Component {
    
    getName(name) {
        console.log('son的名字是'+ name);
    }
    
    render() {
        return (
            <View>
                <SonCompoent  getName={this.getName.bind(this)}/>
            </View>
        );
    }
}
复制代码

子组件通过调用props传入的方法getName，来修改父组件的name属性。

2.通过ref调用

示例：

// 子组件
class  SonCompoent extends Component{

    constructor(props){
        super(props);
        this.name = 'Tom';
        this.state = {};
    }
    render() {
        return (
            <View>
                <Text>Tom</Text>
            </View>
        );
    };
}

// 父组件
class FatherComponet extends Component {
    
    constructor(props){
        super(props);
        this.son = {};
    }
    
    sendName() {
        console.log('son的名字是'+ this.son.name);
    }
    
    render() {
        return (
            <View>
                <SonCompoent ref={(v) => { this.son = v; }}/>
            </View>
        );
    }
}
复制代码

父组件通过ref方法获取子组件对象，再通过该对象获取子组件的name属性。

注：父组件中ref的方法需写为ref={(v) => { this.XXX = v; }，否则在eslint会提示错误

同级组件传递

DeviceEventEmitter方法

class  DiDiCompoent extends Component{

    constructor(props){
        super(props);

        this.state = {
            money:0
        }
    }


    componentDidMount() {

        this.age = 10;
        this.age = 20;

        console.log(this.age);

        // 定义属性,但是对这个属性的修改不会触发render
        this.lister = DeviceEventEmitter.addListener('makeMoney',(money)=>{
            this.setState({
                money:money
            });
        })
    }

    componentWillUnmount() {
        this.lister.remove();
    }


    render() {
        return (
            <View style={styles.didiStyle}>
                <Text> 弟弟</Text>
                <Text>收到{this.state.money}零花钱</Text>
            </View>
        );
    };
}

class GeGeComponet extends Component {

    render() {
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>哥哥</Text>
                <Text onPress={()=>{
                    DeviceEventEmitter.emit('makeMoney',100);
                }}>发生活费</Text>
            </View>
        );
    }
}
复制代码

哥哥组件（GeGeComponet）给弟弟组件（DiDiCompoent）零花钱：

• 在哥哥组件中通过DeviceEventEmitter.emit('makeMoney',100)，触发事件makeMoney传递‘零花钱’100。
• 在弟弟组件中通过DeviceEventEmitter.addListener('makeMoney', fn(value))来监听makeMoney事件，并获取值value

参考

ReactNative之父子组件传值（五）