react native 组件传值 - ImVeryGood/Loan GitHub Wiki

react-native 组件传值

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

1.父子顺传

1.1父传子，通过props

.父控件提供属性

<FatherComponet name="xmg" />
<SonCompoent name={this.props.name}/>

.子控件获取属性

  this.props.name

使用props代码示例

  // 子组件
class  SonCompoent extends Component{

    render() {
        return (
            <View style={styles.sonViewStyle}>
                      <Text style={{fontSize:20}}>{this.props.name}的baby</Text>
            </View>
        );
    };
}

// 父组件
class FatherComponet extends Component {

    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                    <SonCompoent  name={this.props.name}/>
            </View>
        );
    }
}

// 主组件
export default class ReactDemo extends Component {
    render() {
        return (
            <FatherComponet name="xmg" />
        );
    }
}

1.2父传子，通过ref

  • 定义ref

<SonCompoent ref="son" />

  • 获取子组件，执行指定方法，方法参数中传值

this.refs.son.receiveMoney(1000);

  • 使用ref代码示例.

如下：

class  SonCompoent extends Component{
    constructor(props){
        super(props);
        this.state = {
            money:0
        }
    }
receiveMoney(money){
        this.setState({
            money:money
            });
        }
render() {
        return (
                <View style={styles.sonViewStyle}>
                <Text>总共收到{this.state.money}生活费</Text>
            </View>
        );
    };
}

class FatherComponet extends Component {
    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                 <Text style={{marginTop:100}} onPress={()=>{
                    this.refs.son.receiveMoney(1000);
                }}>发生活费</Text>
                <SonCompoent ref="son" />
            </View>
        );
    }
}

2.父子逆传

2.1.通过bind(this)

  • 父组件中定义方法，然后绑定该方法
  • 子组件通过this.props获取方法调用 this.props.receiveMoney(money);

示例：

  class  SonCompoent extends Component{

  makeMoney (money) {
      // 传递给父控件
      console.log('赚了'+ money);
      console.log(this)
      this.props.receiveMoney(money);
  }

  render() {
      return (
           <View style={styles.sonViewStyle}>
              <Text style={{fontSize:20}}> {this.props.name}的baby</Text>
             <Text onPress={this.makeMoney.bind(this,100)}>赚100块钱</Text>
           </View>
      );
  };
}

class FatherComponet extends Component {
    constructor(props){
    super(props);
    console.log(this);
    this.state = {
        money:0
    };
}
receiveMoney(money) {
    console.log('爸爸收到'+ money);

    console.log(this);

    var m = this.state.money;

    m += money;

    this.setState({
          money:m
    });
}
render() {
    return (
         <View style={{flex:1,alignItems:'center'}}>
            <SonCompoent receiveMoney={this.receiveMoney.bind(this)}/>
            <Text style={{marginBottom:50}}>爸爸收到{this.state.money}</Text>
        </View>
    );
}
}
export default class ReactDemo extends Component {
  render() {
    return (
    <FatherComponet/>
 );
}
}

3.无关组件间传值

  • 使用通知

  • 发送通知

DeviceEventEmitter.emit('makeMoney',100);

  • 添加监听者，定义执行方法

this.lister = DeviceEventEmitter.addListener('makeMoney',(money)=>{ this.setState({ money:money }); })

  • 移除监听者

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

通知使用代码

class  DiDiCompoent extends Component{

    constructor(props){
        super(props);
        this.state = {
        money:0
      }
  }

componentDidMount() {
    this.age = 10;
    this.age = 20;

    // 定义属性,但是对这个属性的修改不会触发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>
      );
  }
}

export default class ReactDemo extends Component {
render() {
    return (
        <View style={{flex:1}}>
            <GeGeComponet />
            <DiDiCompoent />
        </View>
    );
}

}

⚠️ **GitHub.com Fallback** ⚠️