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