альтернатива innerRef при использовании хуков - PullRequest
Новая
       6

альтернатива innerRef при использовании хуков

0 голосов
/ 03 мая 2019

Я конвертирую компоненты на основе класса в реагирующие хуки.Я запутался в использовании ref 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

1 Ответ

0 голосов
/ 03 мая 2019

Прежде всего вы не можете обновить состояние в методе обратного вызова ref.Во-вторых, вам просто нужно передать ref вместо innerRef компоненту TabTitleItem, так как он обрабатывает ref с помощью forwardRef

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>
  );
};

Рабочая демонстрация

...