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

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

原文地址：https://blog.csdn.net/qq_60754128/article/details/144010399

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！