学过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>
);
}
}
网友评论