美文网首页
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