当前位置：首页 > news >正文

React拆分组件中的传值问题

news 2025/6/26 20:46:59

在我们实际项目开发中，很多时候为为了项目后期便于维护，都会将相关的组件进行拆分，拆分过后，会将数据方法在父组件中进行编写，然后将一些逻辑拆分为组件，在这个过程中，最重要的就是数据的传递，常用的主要有以下几种
1、父传子 — props
父组件传递数据 — 在子组件标签上绑定属性
子组件接收数据 — 子组件通过props参数接收数据

/*** 父传子* 父组件传递数据 子组件标签身上绑定数据* 子组件接收数据 props参数**/
function Son(props) {console.log(props);return <div>this is son,{props.name}</div>;
}function App() {const name = "this is app name";return (<div><Son name={name}></Son></div>);
}

props说明：

props可以传递任意的数据，如：数字、字符串、数组、对象、函数、JSX
props是只读对象，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改
特殊的prop children：
把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

function Son(props) {console.log(props);return <div>this is son,{props.children}</div>;
}function App() {return (<div><Son>this is span</Son></div>);
}

2、子传父
在子组件中调用父组件中的函数并传递参数

function Son({ onGetSonMsg }) {const sonMsg = "this is son msg";return (<div>this is son<button onClick={() => onGetSonMsg(sonMsg)}>sendMsg</button></div>);
}function App() {const getMsg = (msg) => {console.log(msg);};return (<div>this is App<Son onGetSonMsg={getMsg}></Son></div>);
}

3、兄弟组件通信
借助状态提升机制，通过父组件·进行兄弟组件之间的数据传递

A组件通过子传父把数据传递给父组件App
App拿到数据后通过父传子的方式再传给B组件

function A({ onGetAName }) {const name = "this is A name";return (<div>this is A<button onClick={() => onGetAName(name)}>send</button></div>);
}function B({ name }) {return <div>this is B,{name}</div>;
}function App() {const [name, setName] = useState("");const getAName = (name) => {console.log(name);setName(name);};return (<div>this is App<A onGetAName={getAName}></A><B name={name}></B></div>);
}