react如何传递参数

组件间参数传递

在React中，父组件向子组件传递参数可以通过props实现。父组件在调用子组件时，以属性的形式传递数据。

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

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

子组件向父组件传递参数

子组件通过调用父组件传递的回调函数，将数据作为参数传递回父组件。

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

// 子组件
function ChildComponent({ onData }) {
  const sendData = () => {
    onData("Data from child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

兄弟组件间参数传递

兄弟组件间通信需要通过共同的父组件作为中介。一个兄弟组件将数据传递给父组件，父组件再通过props传递给另一个兄弟组件。

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

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

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

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

跨层级组件参数传递

对于深层嵌套的组件，使用Context API可以避免prop drilling问题。创建Context后，上层组件提供数据，下层组件消费数据。

const DataContext = createContext();

// 上层组件
function App() {
  return (
    <DataContext.Provider value="Global data">
      <ParentComponent />
    </DataContext.Provider>
  );
}

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

路由参数传递

在使用React Router时，可以通过URL参数或state传递数据。

// 通过URL参数
<Route path="/user/:id" component={UserPage} />

// 通过state传递
<Link to={{
  pathname: '/user',
  state: { id: 123 }
}}>User</Link>

// 在目标组件中获取
function UserPage({ match, location }) {
  const id = match.params.id;
  const stateData = location.state;
}

状态管理工具参数传递

使用Redux等状态管理工具时，组件通过connect或hooks从store中获取数据。

// 使用React-Redux hooks
function ConnectedComponent() {
  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</button>
    </div>
  );
}