世界上最伟大的投资就是投资自己的教育
src/App.js
import React, { Component } from 'react';
import Header from './components/Header';
import Home from './components/Home';
class App extends Component {
constructor() {
super();
this.state = {
homeLink: "Home"
}
}
onGreet(age) {
alert(age);
}
onChangeLinkName(newName) {
this.setState({
homeLink: newName
})
}
render() {
const user = {
name: "Anna",
hobbies: ["Sports", "Reading"]
}
return (
<div className="container">
<div className="row">
<div className="col-xs-1 col-xs-offset-11">
<Header homeLink={this.state.homeLink} />
</div>
</div>
<div className="row">
<div className="col-xs-1 col-xs-offset-11">
<h1>Hello !!</h1>
</div>
</div>
<div className="row">
<div className="col-xs-1 col-xs-offset-11">
<Home
name={"Max"}
initialAge={12}
user={user}
greet={this.onGreet}
changeLink={this.onChangeLinkName.bind(this)}
/>
</div>
</div>
</div>
);
}
}
export default App;
src/components/Home.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
age: props.initialAge,
status: 0,
homeLink: "Changed Link"
}
setTimeout(() => {
this.setState({
status: 1
})
}, 3000)
}
onMakeOlder() {
this.setState({
age: this.state.age + 3
})
}
handleGreet() {
this.props.greet(this.state.age)
}
onChangeLink() {
this.props.changeLink(this.state.homeLink);
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-1 col-xs-offset-11">
<div>your name is {this.props.name}, your age is {this.state.age}</div>
<p>Status: {this.state.status}</p>
<button onClick={() => {this.onMakeOlder()}} className="btn btn-primary">Make me older</button>
<hr />
<button onClick={this.handleGreet.bind(this)} className="btn btn-primary">Greet</button>
<hr />
<button onClick={this.onChangeLink.bind(this)} class="btn btn-primary">Change Header Link</button>
</div>
</div>
</div>
);
}
}
Home.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
user: PropTypes.object,
greet: PropTypes.func
};
src/components/Header.js
import React from 'react';
const Header = (props) => {
return (
<div className="container">
<div className="row">
<div className="col-xs-1 col-xs-offset-11">
<h1>{props.homeLink}</h1>
</div>
</div>
</div>
);
};
export default Header;
07:251Free诱人的 React 免费视频教程 - 基础篇 #1 介绍
04:182Free诱人的 React 免费视频教程 - 基础篇 #2 create-React-app
07:423Free诱人的 React 免费视频教程 - 基础篇 #3 第一个组件
05:094Free诱人的 React 免费视频教程 - 基础篇 #4 多个组件
02:295Free诱人的 React 免费视频教程 - 基础篇 #5 输出动态数据
11:226Free诱人的 React 免费视频教程 - 基础篇 #6 通过 Props 传递数据
07:247Free诱人的 React 免费视频教程 - 基础篇 #7 事件
03:548Free诱人的 React 免费视频教程 - 基础篇 #8 组件的 state 属性
04:329Free诱人的 React 免费视频教程 - 基础篇 #9 React 如何更新 dom
05:4310Free诱人的 React 免费视频教程 - 基础篇 #10 无状态组件
05:5111Free诱人的 React 免费视频教程 - 基础篇 #11 子组件向父组件传值
07:05Free诱人的 React 免费视频教程 - 基础篇 #12 组件间传值
06:5713Free诱人的 React 免费视频教程 - 基础篇 #13 双向数据绑定
20:4114Free诱人的 React 免费视频教程 - 基础篇 #14 组件生命周期(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 专业版网站 | 关于我们 | 在线学员:1149
粤公网安备 44152102000088号
| 粤ICP备19038915号
哈哈哈哈哈老师口音。。。实在忍不住想笑啊哈哈哈哈但我居然都能听懂!“要让 try1 传数据给 try2 的话”,,,老师讲得挺清晰的,辛苦老师啦!
惭愧惭愧,不准的普通话,多谢支持。
请教一下: this.props.changeLink(this.state.homeLink);
这里的 changeLink 如何跟 app.js 里的函数对应起来的呢
我明白了, 是因为把 changeLink={this.onChangeLinkName.bind(this)} 把这个函数 onChangeLinkName 赋了 changeLink,导致了它有执行的能力,而不是简单属性。