React18 常见问题

子组件访问父组件值

使用 Props 传递

// ParentComponent.js
import React from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const parentValue = "父组件的值";

  return (
    <div>
      <ChildComponent parentValue={parentValue} />
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from "react";

const ChildComponent = ({ parentValue }) => {
  return <div>父组件值：{parentValue}</div>;
};

export default ChildComponent;

使用 Context 上下文

// ParentContext.js
import React, { createContext, useContext } from "react";

const ParentContext = createContext();

const ParentComponent = () => {
  const parentValue = "父组件的值";

  return (
    <ParentContext.Provider value={parentValue}>
      <ChildComponent />
    </ParentContext.Provider>
  );
};

export default ParentComponent;

export const useParentContext = () => useContext(ParentContext);

// ChildComponent.js
import React from "react";
import { useParentContext } from "./ParentContext";

const ChildComponent = () => {
  const parentValue = useParentContext();

  return <div>父组件值：{parentValue}</div>;
};

export default ChildComponent;

子组件调用父组件方法

使用 Callback Props

// ParentComponent.js
import React from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const handleChildClick = () => {
    console.log("父组件方法被调用");
    // 父组件的逻辑
  };

  return (
    <div>
      <ChildComponent onChildClick={handleChildClick} />
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from "react";

const ChildComponent = ({ onChildClick }) => {
  return (
    <div>
      <button onClick={onChildClick}>调用父组件方法</button>
    </div>
  );
};

export default ChildComponent;

父组件访问子组件值

使用 Ref

// ParentComponent.js
import React, { useRef } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    if (childRef.current) {
      const childValue = childRef.current.getChildValue();
      console.log("子组件值:", childValue);
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>获取子组件值</button>
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React, { forwardRef } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const getChildValue = () => {
    return "子组件的值";
  };

  useImperativeHandle(ref, () => ({
    getChildValue,
  }));

  return <div>子组件</div>;
});

export default ChildComponent;

父组件调用子组件方法

使用 Ref

// ParentComponent.js
import React, { useRef } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const childRef = useRef(null);

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

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>调用子组件方法</button>
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React, { forwardRef, useImperativeHandle } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const doSomething = () => {
    console.log("子组件方法被调用");
    // 子组件的逻辑
  };

  useImperativeHandle(ref, () => ({
    doSomething,
  }));

  return <div>子组件</div>;
});

export default ChildComponent;