美文网首页
Taro Props传值并使用 PropTypes 检查类型

Taro Props传值并使用 PropTypes 检查类型

作者: 张思学 | 来源:发表于2020-03-30 15:49 被阅读0次

    学过react的同学一定知道Props
    自定义组件中接收来自父组件的传值统称为Props
    Props是只读的
    当传递Props的值是函数时,必须在用on+函数名的规范来命名

    Taro 与 React 一样,也支持 PropTypes 检查类型,可以通过类型检查捕获大量错误。
    目前在小程序端还有些问题,但在 H5 端可以使用,用法和在 React 里一样。

    首先创建子组件 子组件采用react Hook写法

    component > Child.jsx

    import Taro from "@tarojs/taro";
    import { View } from "@tarojs/components";
    
    export default function Child(props) {
      const { name, onChange } = props;
      return <View onClick={onChange}>{name}</View>;
    }
    Child.propTypes = {
      name: PropTypes.string,
      onChange: PropTypes.func
    }
    
    父组件
    import Taro, { Component } from "@tarojs/taro";
    import { View } from "@tarojs/components";
    import Child from "../../component/Child";
    import "./index.less";
    
    export default class Index extends Component {
      componentWillMount() {}
    
      componentDidMount() {}
    
      componentWillUnmount() {}
    
      componentDidShow() {}
    
      componentDidHide() {}
    
      config = {
        navigationBarTitleText: "首页"
      };
      state = {
        work: '前端开发工程师',
      };
      change() {
        this.setState({
          work: '高级前端开发工程师'
        })
      }
      render() {
        return (
          <View className="index">
            <Child name={this.state.work} onChange={this.change.bind(this)} />
          </View>
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Taro Props传值并使用 PropTypes 检查类型

          本文链接:https://www.haomeiwen.com/subject/kdevuhtx.html