[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> ```