警告:无状态功能组件无法在NavLink中使用样式组件提供引用

时间:2020-01-31 15:31:10

标签: reactjs styled-components

我在React 16.8中遇到以下错误:

警告:无状态功能组件无法提供引用。尝试访问此引用将失败。

Check the render method of `Button`.
    in NavLink (created by Button)
    in Button
    in Unknown (created by StyledComponents__ButtonLink)
    in StyledComponents__ButtonLink (created by PageHeaderLayout)
    in div (created by PageHeaderLayout)
    in b (created by PageHeaderLayout)
    in div (created by GridColumn)
    in GridColumn (created by PageHeaderLayout)
    in div (created by GridRow)
    in GridRow (created by PageHeader__PageHeaderRow)
    in PageHeader__PageHeaderRow (created by PageHeaderLayout)
    in PageHeaderLayout (created by PageHeader)
    in PageHeader (created by Connect(PageHeader))
    in Connect(PageHeader) (created by Route)
    in Route
    in Switch
    in Unknown (created by BaseLayout)
    in div (created by Grid)
    in Grid (created by BaseLayout__ContentGrid)
    in BaseLayout__ContentGrid (created by BaseLayout)
    in div (created by BaseLayout__LayoutContainer)
    in BaseLayout__LayoutContainer (created by BaseLayout)
    in BaseLayout
    in Router (created by BrowserRouter)
    in BrowserRouter
    in AppContainer
    in Provider

它在以下代码中发生:

      <b><br />
        {entityLinks.map(({ popup, ...linkProps }) =>
          <div key={linkProps.content}>
            <ButtonLink as={NavLink} {...linkProps} />
            {popup && <Popup content={popup} trigger={<Icon name="help circle outline" color="grey" />} />}
          </div>,
        )}  
      </b>

ButtonLink在哪里:

import React from 'react'
import styled from 'styled-components'
import { Button } from 'semantic-ui-react'

export const ButtonLink = styled(({ color, padding, ...props }) => <Button {...props} />).attrs({ basic: true })` 
  &.ui.button.basic {
    white-space: nowrap;
    ...
    ...

传递到entityLinks的{​​{1}}只是这样结构的数组:

ButtonLink

我该如何解决?我遍历了多个类似的线程,但在这种特殊情况下仍然无法解决。以下是const entityLinks = [{ to: `/variant_search/${searchType}/${searchId}`, content: `${snakecaseToTitlecase(searchType)} Variant Search`, disabled, popup: disabled ? 'Search is disabled until data is loaded' : null, }] 中展开的React代码的外观:

enter image description here

0 个答案:

没有答案