如何将样式组件属性innerRef与React无状态组件一起使用？

Question

我有以下样式组件：

const Component = styled.div`
    ...
`;

const Button = (props) => {
    return (
        <Component>
            ...
        </Component>
    );
};

export default styled(Button)``;

我希望获得对Component的基础div的引用。当我执行以下操作时，我得到null：

import Button from './Button.js';

class Foo extends React.Component {

    getRef = () => {
        console.log(this.btn);
    }

    render() {
        return (
            <Button innerRef={elem => this.btn = elem} />
        );
    }
}

我收到null的任何想法以及有关如何访问基础div的任何建议？

注意：我这样做export default styled(Button)``;的原因是可以轻松扩展导出样式的组件。

Answer 1

我设法通过将一个函数作为prop传递给我所针对的样式组件来完成此操作，然后将ref作为函数的参数传递回来：

const Component = styled.div`
    ...
`;

const Button = (props) => {
    return (
        <Component innerRef={elem => props.getRef(elem)}>
            ...
        </Component>
    );
};

export default styled(Button)``;

...

import Button from './Button.js';

class Foo extends React.Component {

    getRef = (ref) => {
        console.log(ref);
    }

    render() {
        return (
            <Button getRef={this.getRef} />
        );
    }
}

Answer 2

将ref prop传递给样式化组件将为您提供StyledComponent包装器的实例，但不会传递给基础DOM节点。这是由于ref的工作方式。因此，不可能直接在样式化的组件包装器上调用DOM方法（如focus）。

因此，要获取对实际的，包装的内部DOM节点的引用，回调将传递到innerRef属性，如下面的示例所示，以将包装在样式化组件“ Input”中的“ input”元素集中在悬停上。 / strong>

  const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

class Form extends React.Component {
  render() {
    return (
      <Input
        placeholder="Hover here..."
        innerRef={x => { this.input = x }}
        onMouseEnter={() => this.input.focus()}
      />
    );
  }
}

render(
  <Form />
);

注意：-     不支持字符串引用（即innerRef =“ node”），因为它们已在React中弃用。