react 常见api 使用（长期更新）

标签：react   NPU   1.2   tabbar   this   extends   cte   render   end   

1、父子通信

1.1 父-子 props

父组件：

    class myPage extends React.Component {
           render() {
                return (
                  

                    {/* 子组件   自定义page 是子组件要接受的属性   mypage是要传递的内容*/}
                    

                        我是一个mypage
                      
                  
            );
      }
}

子组件：

class TabBarComponents extends React.Component {
  constructor(props) {
    // 继承父组件
    super(props);
    this.state = {
    // 接受父组件传的属性
      selectedTab: props.page,
    };
  }
// 然后使用 this.state.selectedTab  这个值， 这个就是mypage   
....
}

1.2

子-》父

子组件：将子组件的value值 text 传递给父组件

    class Input extends Component {
        changeTitle(event) {
            // 子组件调用 父组件通过props传递过来的方法 onChangeText，将要传递的值传见方法
            this.props.onChangeText(event)
        }
        render() {
          return (
            

               

          );
        }    
  }

父组件：

class myPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {newText: 'default'};
  }
  changeText(event) {
    this.setState({
      newText: event.target.value,
    })
  }

  render() {
    return (
      

       

          
我是一个mypage
          

            {this.state.newText}
            {/* 子组件 */}
            

        
        
      
    );
  }
}

子组件通过调用 props.onChangeText 方法，将值传递进来，父组件通过 changeText 方法来接受 传递进来的值。
套路：子组件通过调用 父组件传递的方法 传值。

react 常见api 使用（长期更新）

标签：react   NPU   1.2   tabbar   this   extends   cte   render   end   

原文地址：https://www.cnblogs.com/adouwt/p/10743379.html