javascript - 为什么我的 ref 总是 null 即使我将它设置为一个组件

Question

所以基本上我有 2 件，侧边栏，然后是开瓶器。我正在尝试设置一个将侧边栏连接到当前开启器的参考。开启器是一个功能组件，无论我做什么，当前值都是空的。我错过了什么吗？我只是想调整一个组件的大小。我的目标是能够使用开瓶器调整显示的侧边栏的大小。

这是渲染功能的一部分。

render() {
    const { selected, isSidebar, selectedType, search, active } = this.state;
    const { pending, callback, resource } = this.props;
    const pendingLengh = pending ? pending.length : 0;
    const callbackLength = callback ? callback.length : 0;
    const isResource = !resource || !Object.keys(resource).length;

    return (
      <div className="newPatientPage mainPage">
        {this.renderMetadata()}
        <SubTopBar
          title="New Patient Processing"
          noLeftSide={true}
          subStatus={this.getStatus(pendingLengh, callbackLength)}
          isBarcode={!isResource}
          sideComponent={this.renderSideComponent()}
        />
        {
          active ?
            <SnapshotSideBar
              ref={this.sidebarRef}
              patientResource={this.props.patientResource}
              isShow={isSidebar}
              settup={this.state.settup}
              isScan={true}
              handleCloseSidebar={this.handleCloseSidebar}
            /> :
            <NewPatientSideBar
              ref={this.sidebarRef}
              stepProps={this.state.stepProps}
              selected={selected}
              isShow={isSidebar}
              handleCloseSidebar={this.handleCloseSidebar}
            />
        }

        <SidebarExtension sidebarToggle={this.toggleSidebar} sidebarReference={this.sidebarRef} sidebarState={isSidebar}/>

这是 SidebarExtension 组件

const SidebarExtension = ({
  sidebarToggle,
  sidebarReference,
  sidebarState,
  ...restProps
}) => {
  const [xPos, setXPos] = useState(0);
  const [width, setWidth] = useState();
  const [openerPosition, setOpenerPosition] = useState(50);
  const [isOpen, setIsOpen] = useState(false);
  const toggleSidebar = () => {
    sidebarToggle();
    setIsOpen(!isOpen);
  };

  useEffect(() => {
    setIsOpen(sidebarState);
  }, [sidebarState])

  if ((!isOpen && !sidebarState)) {
    return (
      <>
        <div
          className="resizeHandle"
          style={{
            right: "0Px",
          }}
          onClick={toggleSidebar}
        >
          <LeftCharvenSVG />
        </div>
      </>
    );
  }

  return (
    <>
      <div
        className="resizeHandle active"
        onClick={toggleSidebar}
        onMouseDown={startResize}
      >
        <LeftCharvenSVG />
      </div>
    </>
  );
};

export default SidebarExtension;

这是构造函数的样子。 主构造函数

标签： javascriptreactjs

Answer 1

从文档https://reactjs.org/docs/forwarding-refs.html您需要将功能组件包装在 React.forwardRef()

例子

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

在你的情况下，这将是：

const SidebarExtension = React.forwardRef(({
  sidebarToggle,
  sidebarReference,
  sidebarState,
  ...restProps
}, ref) => {
  const [xPos, setXPos] = useState(0);
  const [width, setWidth] = useState();
  const [openerPosition, setOpenerPosition] = useState(50);
  const [isOpen, setIsOpen] = useState(false);
  const toggleSidebar = () => {
    sidebarToggle();
    setIsOpen(!isOpen);
  };

  useEffect(() => {
    setIsOpen(sidebarState);
  }, [sidebarState])

  if ((!isOpen && !sidebarState)) {
    return (
      <>
        <div
          className="resizeHandle"
          style={{
            right: "0Px",
          }}
          ref={ref}
          onClick={toggleSidebar}
        >
          <LeftCharvenSVG />
        </div>
      </>
    );
  }

  return (
    <>
      <div
        className="resizeHandle active"
        onClick={toggleSidebar}
        onMouseDown={startResize}
      >
        <LeftCharvenSVG />
      </div>
    </>
  );
});

export default SidebarExtension;