使用钩子时替代innerRef

Question

我正在将基于类的组件转换为反应钩子。我对使用 ref 部分感到困惑。因为，我使用它的方式抱怨我The "innerRef" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use "ref" instead like a typical component.。

使用钩子时如何使其工作？

const Tabs = ({activeTab, children}) => {
  const [tabsElements, setTabsElements] = useState([])

  return (
    <TabsContext.TabProvider activeTab={activeTab}>
      <TabsContext.TabConsumer>
        {value => (
          <ReactTabs>
            <TabsContainer>
              <ListTabs>
                {value.context.tabs.map(tab => (
                  <TabTitleItem
                    key={tab.id}
                    onClick={value.context.onClick(tab)}
                    id={tab.id}
                    innerRef={tabElement => {
                      if (!tabsElements[tab.id]) {
                        setTabsElements(tabElements => ({
                          ...tabElements,
                          [tab.id]: tabElement,
                        }))
                      }
                    }}
                    isActiveTab={value.context.activeTab.id === tab.id}
                  >
                    <TabAnchorItem>{tab.title}</TabAnchorItem>
                  </TabTitleItem>
                ))}
              </ListTabs>

              <ActiveTabBorder
                activeTabElement={tabsElements[value.context.activeTab.id]}
              />
            </TabsContainer>

            {children}
          </ReactTabs>
        )}
      </TabsContext.TabConsumer>
    </TabsContext.TabProvider>
  )
}

这里是演示

https://codesandbox.io/s/z3moq8662p

Answer 1

首先，您不能在 ref 回调方法中更新状态。其次，您只需将 ref 而不是 innerRef 传递给 TabTitleItem 组件，因为它在内部使用 forwardRef 处理 ref

const Tabs = ({ activeTab, children }) => {
  const [tabsElements, setTabsElements] = useState([]);
  const tabElements = useRef({});

  return (
    <TabsContext.TabProvider activeTab={activeTab}>
      <TabsContext.TabConsumer>
        {value => (
          <ReactTabs>
            <TabsContainer>
              <ListTabs>
                {console.log("value", value.context)}
                {value.context.tabs.map(tab => (
                  <TabTitleItem
                    key={tab.id}
                    onClick={value.context.onClick(tab)}
                    id={tab.id}
                    ref={tabElement => {
                      tabElements.current[tab.id] = tabElement;
                    }}
                    isActiveTab={value.context.activeTab.id === tab.id}
                  >
                    <TabAnchorItem>{tab.title}</TabAnchorItem>
                  </TabTitleItem>
                ))}
              </ListTabs>
              <ActiveTabBorder
                activeTabElement={tabsElements[value.context.activeTab.id]}
              />
            </TabsContainer>

            {children}
          </ReactTabs>
        )}
      </TabsContext.TabConsumer>
    </TabsContext.TabProvider>
  );
};

Working demo