React拆分组件中的传值问题

在我们实际项目开发中，很多时候为为了项目后期便于维护，都会将相关的组件进行拆分，拆分过后，会将数据方法在父组件中进行编写，然后将一些逻辑拆分为组件，在这个过程中，最重要的就是数据的传递，常用的主要有以下几种
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说明：

1. props可以传递任意的数据，如：数字、字符串、数组、对象、函数、JSX
2. 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、兄弟组件通信
借助状态提升机制，通过父组件·进行兄弟组件之间的数据传递

1. A组件通过子传父把数据传递给父组件App
2. 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>);
}

除了上述几种方法外，我们有时候还会用到Redux和Mobx这些状态管理库来进行传递一些数据，Redux可以看这篇文章
https://blog.csdn.net/qq_60754128/article/details/143836269?spm=1001.2014.3001.5502

以上是常见的进行传值的方法