styled-components - innerRef 被完全忽略

Question

我遇到了一个关闭问题，我在组件上的 innerRef Prop 被完全吞没，并且从未运行过。

这是我的组件实现的样子:

<StyledPopOver
  innerRef={el => (this.popOverEl = el)}
  transitionState={transitionState}
  animationTiming={animationTiming}
  style={this.getAnchorPosition()}
  {...styledProps}
>
  {children}
</StyledPopOver>

这是样式组件定义的样子:

const StyledPopOver = styled.div`
  display: table-cell;
  transform-origin: top;
  transition-property: all;
  position: fixed;
  z-index: 9998;

  opacity: 0;
  transform: scaleY(0);

  ${props => {
    switch (props.transitionState) {
      case ENTERING:
        return css`
          opacity: 1;
          transform: scaleY(1);
          transition-duration: ${passedProps =>
            passedProps.animationTiming.enter}ms;
        `
      case ENTERED:
        return css`
          opacity: 1;
          transform: scaleY(1);
        `
      case EXITING:
        return css`
          transition-duration: ${passedProps =>
            passedProps.animationTiming.exit}ms;
        `
      default:
        return null
    }
  }};
`

如果我记录传递到样式化组件中的 Prop ，我可以看到 innerRef。但是，如果我在我的 ref setter 中放置一个日志，它就永远不会被调用。

唯一特别的是组件被呈现为 React 16 Portal 的子组件。也就是说，我只是测试了将门户从树中拉出，我得到了相同的结果。

Answer 1

我解决了这个问题，归根结底这是一个类，所以我想我会提供我的解决方案。

事实证明，在我的树的更高层，我使用“innerRef”的方式正在向下级联到使用 {...styledProps}

的 child

我学到的是 innerRef 应该只在直接样式化的组件上用作 Prop 名称。如果不是直接样式化的组件，它应该永远是 ref(当与 HTML 元素交互时)，或者一个不是 innerRef 的名称(当对哪个元素做任何特殊的事情时)获取 ref 处理程序。