react如何传值

React 传值方法

React 中组件间传值有多种方式，根据组件关系和场景选择合适的方法。

父组件向子组件传值（Props）

父组件通过属性（props）将数据传递给子组件。子组件通过 props 接收数据。

// 父组件
function Parent() {
  const data = "Hello from Parent";
  return <Child message={data} />;
}

// 子组件
function Child(props) {
  return <div>{props.message}</div>;
}

子组件向父组件传值（回调函数）

父组件通过 props 传递回调函数给子组件，子组件调用该函数将数据传回父组件。

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <Child onData={handleData} />;
}

// 子组件
function Child({ onData }) {
  const data = "Hello from Child";
  return <button onClick={() => onData(data)}>Send Data</button>;
}

兄弟组件间传值（状态提升）

将共享状态提升到共同的父组件中，通过 props 传递给兄弟组件。

// 父组件
function Parent() {
  const [sharedData, setSharedData] = useState("");

  return (
    <>
      <SiblingA onData={setSharedData} />
      <SiblingB data={sharedData} />
    </>
  );
}

// 兄弟组件A
function SiblingA({ onData }) {
  const data = "Data from SiblingA";
  return <button onClick={() => onData(data)}>Send Data</button>;
}

// 兄弟组件B
function SiblingB({ data }) {
  return <div>{data}</div>;
}

跨层级组件传值（Context API）

使用 React.createContext 创建上下文，通过 Provider 提供数据，子组件通过 useContext 或 Consumer 消费数据。

// 创建上下文
const DataContext = React.createContext();

// 父组件
function Parent() {
  const data = "Context Data";
  return (
    <DataContext.Provider value={data}>
      <Child />
    </DataContext.Provider>
  );
}

// 子组件
function Child() {
  const data = useContext(DataContext);
  return <div>{data}</div>;
}

全局状态管理（Redux 或 Zustand）

对于复杂应用，可以使用状态管理库如 Redux 或 Zustand 进行全局状态管理。

// Redux 示例
import { useSelector, useDispatch } from "react-redux";

function Component() {
  const data = useSelector((state) => state.data);
  const dispatch = useDispatch();

  const updateData = () => {
    dispatch({ type: "UPDATE_DATA", payload: "New Data" });
  };

  return (
    <div>
      <div>{data}</div>
      <button onClick={updateData}>Update Data</button>
    </div>
  );
}

路由传值（React Router）

通过路由参数或查询字符串传递数据。

// 路由参数
<Route path="/user/:id" component={User} />

// 组件中获取参数
function User({ match }) {
  const { id } = match.params;
  return <div>User ID: {id}</div>;
}

// 查询字符串
<Link to="/search?query=react">Search</Link>

// 组件中获取查询参数
function Search() {
  const query = new URLSearchParams(useLocation().search).get("query");
  return <div>Search Query: {query}</div>;
}

使用 Refs 传值

通过 useRef 或 createRef 创建引用，直接访问 DOM 或组件实例。

function Parent() {
  const childRef = useRef();

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Trigger Child</button>
    </>
  );
}

// 子组件需要使用 forwardRef
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething: () => {
      console.log("Child method called");
    },
  }));

  return <div>Child Component</div>;
});