react hooks 里父子兄相互传值

在 React Hooks 中，可以使用 useContext、useReducer、useCallback 等 Hook 来实现父子兄组件之间的值传递。

其中，useContext 可以用于跨层级传递数据，useReducer 可以用于复杂状态管理，useCallback 可以用于性能优化。

具体实现方法可以参考以下示例代码：

// 创建一个 Context 对象
const MyContext = React.createContext();

// 父组件
function Parent() {
const [count, setCount] = useState(0);

return (
<MyContext.Provider value={{ count, setCount }}>
<Child />
</MyContext.Provider>
);
}

// 子组件
function Child() {
const { count, setCount } = useContext(MyContext);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

相关问题

react hooks 父子组件传值

React Hooks中可以使用一些钩子函数来实现父子组件之间的传值。

1. 使用useState钩子函数

通过useState钩子函数可以在父组件中定义一个状态，并将该状态作为props传递给子组件。在子组件中可以通过props获取父组件传递的状态值，并通过回调函数将子组件的值传递给父组件。

父组件：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleCallback = (childData) => {
    console.log(childData);
  };

  return (
    <div>
      <ChildComponent count={count} callback={handleCallback} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ParentComponent;

子组件：

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.callback('Hello from child component');
  };

  return (
    <div>
      <p>Count: {props.count}</p>
      <button onClick={handleClick}>Send Data to Parent</button>
    </div>
  );
}

export default ChildComponent;

2. 使用useContext钩子函数

通过useContext钩子函数可以在父组件中创建一个context对象，并将该对象作为props传递给子组件。在子组件中可以通过useContext获取父组件传递的context对象，并在需要的地方使用该对象的值。

父组件：

import React, { createContext, useState } from 'react';
import ChildComponent from './ChildComponent';

export const CountContext = createContext();

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={count}>
      <ChildComponent />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </CountContext.Provider>
  );
}

export default ParentComponent;

子组件：

import React, { useContext } from 'react';
import { CountContext } from './ParentComponent';

function ChildComponent() {
  const count = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default ChildComponent;

react hooks 父子传值

React Hooks 提供了一些函数来处理父子组件之间的传值，其中最常用的是 useState 和 useContext。

useState 可以在父组件中定义一个状态，然后将该状态和修改该状态的函数传递给子组件。子组件可以使用该函数来修改父组件中的状态。

useContext 可以在父组件中创建一个 Context 对象，并将该对象传递给子组件。子组件可以使用 useContext 函数来获取父组件中的状态，而不需要通过 props 传递。

下面是一个使用 useState 和 useContext 的简单示例：

import React, { useState, createContext } from 'react';

const CounterContext = createContext();

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <<Child setCount={setCount} />
      <CounterContext.Provider value={count}>
        <<Grandchild />
      </CounterContext.Provider>
    </div>
  );
}

function Child({ setCount }) {
  return (
    <button onClick={() => setCount(count => count + 1)}>
      Increment
    </button>
  );
}

function Grandchild() {
  const count = useContext(CounterContext);

  return (
    <h2>Count from context: {count}</h2>
  );
}

在这个例子中，父组件定义了一个状态 count，并将其和修改状态的函数 setCount 传递给了 Child 组件。Child 组件通过调用 setCount 函数来增加 count 的值。

然后，父组件创建了一个 CounterContext 对象，并将 count 的值传递给了 Grandchild 组件。Grandchiild 组件使用 useContext 函数获取 count 的值，并将其显示在页面上。

这个例子展示了如何在父子组件之间传递值，并且展示了 useState 和 useContext 的使用方法。