一、父传子:
1. 传递多个属性
父组件可以通过 props 传递多个属性给子组件。
示例
// 子组件
function Son(props) {return (<div>This is Son, {props.name} - Age: {props.age}</div>);
}// 父组件
function App() {const name = 'This is App Name';const age = 10;return (<div><Son name={name} age={age} /></div>);
}
2. 传递函数作为 props
父组件可以将函数作为 props 传递给子组件,子组件可以调用这个函数来与父组件进行交互。
示例
// 子组件
function Son(props) {const handleClick = () => {props.onButtonClick('Button clicked!');};return (<div>This is Son. <button onClick={handleClick}>Click Me</button></div>);
}// 父组件
function App() {const handleSonClick = (message) => {console.log(message);};return (<div><Son onButtonClick={handleSonClick} /></div>);
}
3. 使用默认值
为子组件的 props 设置默认值,使用 defaultProps
。
示例
// 子组件
function Son(props) {return <div>This is Son, {props.name}</div>;
}Son.defaultProps = {name: 'Default Name'
};// 父组件
function App() {return (<div><Son /> {/* 不传递 name 属性 */}</div>);
}
4. PropTypes 验证
使用 prop-types
库可以对传递给子组件的 props 进行类型检查。
示例
import PropTypes from 'prop-types';// 子组件
function Son(props) {return <div>This is Son, {props.name}</div>;
}Son.propTypes = {name: PropTypes.string.isRequired, // name 是必需的字符串
};// 父组件
function App() {return (<div><Son name="This is App Name" /></div>);
}
5. 传递对象和数组
父组件可以传递对象或数组作为 props,子组件可以直接使用。
示例:
子组件向父组件传递数据的主要方式是通过回调函数。父组件将一个函数作为 props 传递给子组件,子组件在需要时调用这个函数,并将数据作为参数传递给父组件。
// 子组件
function Son(props) {return (<div>This is Son, {props.data.name}, Age: {props.data.age}</div>);
}// 父组件
function App() {const user = { name: 'John', age: 25 };return (<div><Son data={user} /></div>);
}
总结:
- 多属性传递: 父组件可以传递多个属性给子组件。
- 函数作为 props: 父组件可以将函数传递给子组件,子组件可以调用这个函数与父组件进行交互。
- 默认值和类型检查: 可以通过
defaultProps
和PropTypes
来确保 props 的完整性和正确性。 - 传递对象和数组: 可以将复杂的数据结构(如对象和数组)作为 props 传递。
二、子传父:
子组件向父组件传递数据的主要方式是通过回调函数。父组件将一个函数作为 props 传递给子组件,子组件在需要时调用这个函数,并将数据作为参数传递给父组件。
1.基本用法示例:
父组件
import React from 'react';
import Son from './Son';function App() {const handleMessage = (msg) => {console.log("Received from Son:", msg);};return (<div><h1>Parent Component</h1><Son onSendMessage={handleMessage} /></div>);
}export default App;
子组件
import React from 'react';function Son(props) {const sendMessage = () => {props.onSendMessage("Hello from Son!");};return (<div><h2>Child Component</h2><button onClick={sendMessage}>Send Message to Parent</button></div>);
}export default Son;
2. 传递事件数据
子组件可以传递事件数据给父组件,通常用于处理用户输入或按钮点击。
示例
// 父组件
function App() {const handleInputChange = (inputValue) => {console.log("Input from Son:", inputValue);};return (<div><h1>Parent Component</h1><Son onInputChange={handleInputChange} /></div>);
}// 子组件
function Son(props) {const handleChange = (event) => {props.onInputChange(event.target.value);};return (<div><h2>Child Component</h2><input type="text" onChange={handleChange} placeholder="Type something..." /></div>);
}
3. 传递多个参数
子组件也可以通过回调函数传递多个参数给父组件。
示例
// 父组件
function App() {const handleData = (name, age) => {console.log("Received from Son:", name, age);};return (<div><h1>Parent Component</h1><Son onSendData={handleData} /></div>);
}// 子组件
function Son(props) {const sendData = () => {props.onSendData("John", 30);};return (<div><h2>Child Component</h2><button onClick={sendData}>Send Data to Parent</button></div>);
}
总结:
- 回调函数: 子组件通过调用父组件传递的回调函数来传递数据。
- 事件数据传递: 子组件可以通过回调函数向父组件传递事件数据,如用户输入。
- 多个参数: 子组件可以通过回调函数传递多个参数给父组件。
三、使用Context机制跨层级组件通信:
App组件——A组件——B组件
1.创建上下文对象:在所有组件外部创建一个上下文对象
import React, { createContext } from 'react';// 创建上下文对象
cosnt MsgContext = createContext()
2.顶层组件提供数据:在顶层组件通过Provider组件提供数据
// App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ComponentA from './ComponentA';const App = () => {const [data, setValue] = useState("Hello from Context!");return (<MyContext.Provider value={{ data, setData }}><h1>Top Level Component</h1><A /></MyContext.Provider>);
};export default App;
3.中间组件A组件(可选)
// ComponentA.js
import React from 'react';
import ComponentB from './ComponentB';const ComponentA = () => {return (<div><h2>Component A</h2><B /></div>);
};export default ComponentA;
4.底层组件消费数据: 在底层组件中使用 useContext 钩子获取数据。
// ComponentB.js
import React, { useContext } from 'react';
import MyContext from './MyContext';const ComponentB = () => {const { value, setValue } = useContext(MyContext); // 获取上下文const changeValue = () => {setValue('update from B'); // 更新上下文值};return (<div><h3>Component B</h3><p>Data from Context: {data}</p><button onClick={changeValue}>更新值</button></div>);
};export default ComponentB;
总结:
- 创建 Context: 使用
createContext
创建上下文。 - 提供 Context: 使用
Context.Provider
在顶层组件中提供数据。 - 使用 Context: 在子组件中使用
useContext
钩子访问上下文。 - 更新 Context: 子组件通过调用更新函数来修改上下文的值。