[TOC]
## :-: 傳遞參數
```
import React from "react";
// prop-types -- 數據校驗的插件
import PropTypes from "prop-types";
class Person extends React.Component {
state = {
// 傳入的參數為只讀類型、不可直接更改
// 這樣做就可以更改啦
name: this.props.name
};
static defaultProps = {
// 沒有傳參數,默認值
name: "default"
};
static propTypes = {
// 數據校驗 需要安裝prop-types包、 npm install --save prop-types
name: PropTypes.string,
age: PropTypes.number,
// PropTypes.oneOf -- 限定傳入的值必須是數組中的某一項
sex: PropTypes.oneOf(["男", "女"]),
// PropTypes.objectOf(PropTypes.number) -- 傳入的值是object并且對象里面是number類型的、
figure: PropTypes.objectOf(PropTypes.number),
hobby: PropTypes.arrayOf(PropTypes.string),
salary(props, propsName, componentName) {
if (props[propsName] < 10000) {
return new Error(propsName + " - 薪資不能小于1w");
}
}
};
render() {
console.log(this.props);
const { name, age, sex, hobby, salary, figure } = this.props;
return (
<>
<div>{name} 個人資料</div> <div>年齡:{age}</div> <div>性別:{sex}</div> <div>身高:{figure.height}cm</div> <div>體重:{figure.weight}kg</div> <div>興趣:{hobby}</div> <div>薪資:{salary}/月</div>
</>
);
}
}
export default Person;
// -----------------------------------------------------------------
import React from "react";
import ReactDOM from "react-dom";
import Person from "./components/Person.js";
ReactDOM.render(<Person {...person} />, document.getElementById("root"));
```
## :-: 組件間數據傳遞(函數/數據)
```
// ----------------------------------- index.js
import React from "react";
import ReactDOM from "react-dom";
import TodoWrapper from "./components/task/TodoWrapper.js";
ReactDOM.render(<TodoWrapper />, document.getElementById("root"));
// ----------------------------------- ./context.js
import React from "react";
// React 16版本后才支持的方法
const { Provider, Consumer } = React.createContext();
export { Provider, Consumer };
// ----------------------------------- ./TodoWrapper.js
import React from "react";
import TodoList from "./TodoList.js";
import { Provider } from "./context.js";
import "./index.css";
class ToddWrapper extends React.Component {
task = React.createRef();
state = {
list: []
};
render() {
return (
<Provider value={{ deleteTask: this.deleteTask }}>
<div className="wrap">
<div>
<input type="text" ref={this.task} />
<button onClick={this.handleClick}>添加</button>
</div>
<TodoList list={this.state.list} deleteTask={this.deleteTask} />
</div>
</Provider>
);
}
handleClick = () => {
if (!this.task.current.value) return;
this.setState({
list: [...this.state.list, this.task.current.value]
});
this.task.current.value = "";
};
deleteTask = index => {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: [...list]
});
};
}
export default ToddWrapper;
// ----------------------------------- ./TodoList.js
import React from "react";
import TodoItem from "./TodoItem.js";
class TodoList extends React.Component {
render() {
const { list, deleteTask } = this.props;
return (
<ul>
{list.map((item, index) => (
<TodoItem
key={index}
task={item}
index={index}
deleteTask={deleteTask}
/>
))}
</ul>
);
}
}
export default TodoList;
// ----------------------------------- ./TodoItem.js
import React from "react";
import { Consumer } from "./context.js";
class Todoitem extends React.Component {
render() {
const { task, index } = this.props;
return (
<Consumer>
{({ deleteTask }) => (
<li>
{task}
<button
onClick={() => {
deleteTask(index);
}}
>
x
</button>
</li>
)}
</Consumer>
);
}
}
export default Todoitem;
```
## :-: slot -- 傳遞元素內容(插槽)
```
<App>
<div>插槽</div>
</App>
// ---------------------------------------------
import React from "react";
import NavBar from "./components/NavBar.js";
class App extends React.Component {
render() {
return (
<>
<NavBar />
<div className="content">
{/* this.props.children -- 插槽 */}
{ this.props.children }
</div>
</>
);
}
}
export default App;
```
- 如果給自定義組件傳遞元素的內容,React會將其作為props的屬性傳遞過去。slot方式分配的是children屬性、
```jsx
<SlotHtml html={<p>slot: this.props.html</p>}>
<p>slot: this.props.children</p>
</SlotHtml>
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request