Как использовать React Ref со стилевым компонентом

Question

В настоящее время я использую React 16.8.6 и стилизованные компоненты 4.3.2 и сталкиваюсь с проблемой, пытающейся использовать React.forwardRef.

В комментариях. js

import CommentItem from './CommentItem';
class Comments extends Component {
  constructor(props) {
    super(props);
    this.items = [];
  }

  componentDidMount() {
    console.log(this.items);
  }

  render() {
    const { comments } = this.props;
    return (
      <div>
          {comments.length > 0 &&
            comments.map((comment, i) => {
              this.items[i] = React.createRef();
              return (
                <CommentItem
                  ref={this.items[i]}
                  key={comment.id}
                  comment={comment}
                />
              );
            })}
      </div>
    );
  }
}

В CommentItem. js

import styled from "styled-components";
import { Media } from "react-bulma-components";

const CommentMediaWrapper = styled(Media)`
  position: relative;
`;
const CommentItem = React.forwardRef(
  ({ comment }, ref) => {
    return (
      <CommentMediaWrapper ref={ref}>
        <div>...</div>
      </CommentMediaWrapper>
    );
  }
);
export default CommentItem;

В комментариях. js будет поддерживать массив [{ current: null },...] Я не знаю, как передать ref в CommentMediaWrapper. Я не хочу добавлять новый элемент внешний или внутренний CommentMediaWrapper. Спасибо за вашу помощь.

Answer 1

Я думаю, что проблема здесь больше связана с элементом библиотеки Media из react-bulma-components, который вы переносите. Этот компонент предоставляет реквизит с именем domRef, который можно использовать для передачи ссылки DOM на элемент HTML под обертками.

const CommentItem = React.forwardRef(
  ({ comment }, ref) => {
    return (
      <CommentMediaWrapper domRef={ref}>
        <div>...</div>
      </CommentMediaWrapper>
    );
  }
);

Ссылка на Github