react如何传参

在React中传递参数的方法

父子组件间通过props传参

父组件通过props向子组件传递数据。子组件通过this.props（类组件）或直接解构props（函数组件）接收参数。

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

// 子组件（函数组件）
function Child({ message }) {
  return <div>{message}</div>;
}

// 子组件（类组件）
class Child extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

子组件向父组件传参

通过将回调函数作为props传递给子组件，子组件调用该函数并传递参数。

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

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

使用Context跨层级传参

适用于深层嵌套组件间的参数传递。

const MyContext = React.createContext();

// 提供者组件
function App() {
  return (
    <MyContext.Provider value="Shared Data">
      <Child />
    </MyContext.Provider>
  );
}

// 消费者组件
function Child() {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

通过路由传参

使用react-router-dom进行页面间参数传递。

// 传递参数
<Link to="/user/123">User</Link>
// 或
<Link to={{ pathname: "/user", state: { id: 123 } }}>User</Link>

// 接收参数
function User() {
  // URL参数
  const { id } = useParams();
  // state参数
  const { state } = useLocation();
  return <div>User ID: {id || state?.id}</div>;
}

使用状态管理库传参

通过Redux或MobX等状态管理工具共享参数。

// Redux示例
// 定义action
const setData = (data) => ({ type: 'SET_DATA', payload: data });

// 组件中dispatch
dispatch(setData("Some data"));

// 组件中获取
const data = useSelector(state => state.data);

通过ref传参

使用ref直接访问组件实例或DOM元素。

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

  const handleClick = () => {
    childRef.current.doSomething("Data via ref");
  };

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

// 子组件需要使用forwardRef
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething: (data) => {
      console.log(data);
    }
  }));
  return <div>Child</div>;
});