世界上最伟大的投资就是投资自己的教育
学到的知识点:
this.props
this.props.children
Typechecking With PropTypes https://reactjs.org/docs/typechecking-with-proptypes.html
src/App.js
import React, { Component } from 'react';
import Header from './components/Header';
import Home from './components/Home';
class App extends Component {
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 />
</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"} age={12} user={user}>
<p>I am child</p>
</Home>
</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 {
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.props.age}</div>
<div>
<h4>hobbies</h4>
<ul>
{this.props.user.hobbies.map((hobby, i) => <li key={i}>{hobby}</li>)}
</ul>
</div>
<div>{this.props.children}</div>
</div>
</div>
</div>
);
}
}
Home.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
user: PropTypes.object,
children: PropTypes.element.isRequired
};
07:251Free诱人的 React 免费视频教程 - 基础篇 #1 介绍
04:182Free诱人的 React 免费视频教程 - 基础篇 #2 create-React-app
07:423Free诱人的 React 免费视频教程 - 基础篇 #3 第一个组件
05:094Free诱人的 React 免费视频教程 - 基础篇 #4 多个组件
02:295Free诱人的 React 免费视频教程 - 基础篇 #5 输出动态数据
11:22Free诱人的 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:0512Free诱人的 React 免费视频教程 - 基础篇 #12 组件间传值
06:5713Free诱人的 React 免费视频教程 - 基础篇 #13 双向数据绑定
20:4114Free诱人的 React 免费视频教程 - 基础篇 #14 组件生命周期(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
提示给我的错误是: 无法读取未定义的属性 “map”
是不是哪里打错了,是这个
this.props.user.hobbies
我前几次是手打的,后来就直接 copy 您的了,
你把 this.props 打出来看看喽,看有什么内容,再看是不是真传过来了
谢谢,找到问题了,app.js 定义 user 对象的时候把 hobbies 写成了 bobbies,已经解决了,谢谢
我想问一下 再父组件用 props 把一个对象传到子组件 在子组件中是否可以 用 PropTypes 来验证对象中的一个字段 是否为 number 或者 object 请大佬回复一下
可以的
怎么一直报这个错。
你这个用的是 function ,要用 class component 的写法才有这个写法的 render