// 子组件Main
import React from "react";
import PropTypes from 'prop-types';
class Main extends React.Component {/* 属性规则校验 */static defaultProps = {xNum: 0,bigNum: 0};static propTypes = {xNum: PropTypes.number,bigNum: PropTypes.number};render() {let { xNum, bigNum} = this.props;return <div className="main"><p>邓紫棋有：{bigNum}专辑</p><p>周杰伦有：{xNum}首歌</p></div>;}
}export default Main;
// 子组件Footer
import React from "react";
import { Button } from 'antd';
import PropTypes from 'prop-types';class Footer extends React.PureComponent {/* 属性规则校验 */static defaultProps = {};static propTypes = {change: PropTypes.func.isRequired};render() {let { change } = this.props;return <div className="footer"><Button type="primary" onClick={change.bind(null, 'sup')}>你好</Button><Button type="primary" danger onClick={change.bind(null, 'opp')}>我不好</Button></div>;}
}export default Footer;
// 父组件
import React from "react";
import Main from './Main'; // 引入子组件
import Footer from './Footer'; // 引入子组件class Wei extends React.Component {state = {bigNum: 10,xNum : 0};// 设置为箭头函数：不论方法在哪执行的，方法中的this永远都是Wei父组件的实例change = (type) => {let { bigNum, xNum } = this.state;if (type === 'big') {this.setState({ bigNum: bigNum+ 1 });return;}this.setState({ xNum : xNum + 1 });};render() {let { bigNum, xNum } = this.state;return <div><div className="header"><span className="num">{bigNum+ xNum }</span></div><Main bigNum={bigNum} xNum ={xNum} /><Footer change={this.change} /></div>;}
}export default Wei;
本文链接：https://my.lmcjl.com/post/10467.html
展开阅读全文
4 评论