React ref.current가 null입니다.

React ref.current가 null입니다.

일정/일정 앱은 시간범위가 다양하여 작업 중입니다.현재 시각의 선을 표시하고 약속 블록을 표시하려면 주어진 시간 범위 내에서 1분에 대응하는 픽셀 수를 계산해야 합니다.

예를 들어 다음과 같습니다.오전 7시에 시작해서 오후 5시에 끝난다면 총 10시간 범위입니다.달력의 본문의 높이가 1000픽셀이라고 합시다.즉, 매 시간은 100픽셀, 매분은 166픽셀을 나타냅니다.

현재 시간이 오후 3시라면.의제 시작까지 480분 남았습니다.즉, 현재 시각을 표시하는 선은 달력 본문 위에서796,8픽셀(480 x 1,66)이어야 합니다.

계산은 문제없지만 의제 기구의 높이를 파악하는 데 문제가 없습니다.높이를 측정하기 위해 React Ref를 사용하려고 했는데 오류가 발생했습니다.ref.current is null

아래 코드:

class Calendar extends Component {
    calendarBodyRef = React.createRef();

    displayCurrentTimeLine = () => {
        const bodyHeight = this.calendarBodyRef.current.clientHeight; // current is null
    }

    render() {
        return (
            <table>
                <thead>{this.displayHeader()}</thead>
                <tbody ref={this.calendarBodyRef}>
                    {this.displayBody()}
                    {this.displayCurrentTimeLine()}
                </tbody>
            </table>
        );
    }
}

따라서 참조는 첫 번째 렌더링에서 설정될 수 없습니다.설정 중 및 설정 후를 확인할 수 있습니다.componentDidMount앞으로 두 가지 방법이 있습니다

콜백 스타일 ref를 사용하여 이를 기반으로 상태를 설정할 수 있습니다.예: 참조를 소품으로 전달하는 대신 다음과 같은 기능에 대한 참조를 전달할 수 있습니다.this.handleRef그러면 그 안에서 논리적으로 작동하게 될 거야

  handleRef = r => {
    this.setState({ bodyHeight: r.clientHeight})
    this.calendarBodyRef.current = r;
  };

또는 현재 설정을 유지할 수 있지만 이 설정을 이동해야 합니다.clientHeight다음과 같은 라이프 사이클 기능을 제공합니다.

  componentDidMount() {
    this.setState({ bodyHeight: this.calendarBodyRef.current.clientHeight });
  }

최종적으로, 이와 같이 참조의 현재 값을 즉시 읽을 수 없습니다. 렌더 후에 참조를 확인한 후 다음 참조를 읽어야 합니다.bodyHeight주(州)에서.

참조 콜백 함수를 사용할 수 있습니다.이 경우 "React-createRef()"를 사용할 필요가 없습니다.

<tbody ref={this.calendarBodyRef}>
...
calendarBodyRef = (e) => {
console.log(e)
}

DOM 요소가 반환되므로 "current"를 사용할 필요가 없습니다.

사용하시는 경우react-redux컴포넌트를 포장하여connect그런 다음 네 번째 인수를 전달해야 합니다. 즉, forwardRef는 다음과 같습니다.

connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})

도움이 되었으면 좋겠습니다.

계산된 차체 높이를 구성 요소 상태에서 보관하는 것을 피하는 것이 바람직할 경우, 또 다른 접근 방식은 두 번째 방법을 도입하는 것입니다.ref, (예:elementDisplayHeightRef와 경우는 다음과 같습니다.

class Calendar extends React.Component {

    /* Create a ref for the body */
    calendarBodyRef = React.createRef();

    /* Create a ref for element where height will be displayed */
    elementDisplayHeightRef = React.createRef();

    displayCurrentTimeLine = () => {

        /* Calculate body height from ref */
        const bodyHeight = this.calendarBodyRef.current.clientHeight;    

        /* Update display */
        this.elementDisplayHeightRef.current.innerText = `bodyHeight:${bodyHeight}`
    }

    render() {
        return (
            <table>
                <thead></thead>
                <tbody ref={this.calendarBodyRef}>
                    <td><td>Some row</td></td>
                    {/* Bind display ref */ }
                    <tr><td ref={this.elementDisplayHeightRef}></td></tr>
                </tbody>
            </table>
        );
    }

    /* Add did mount life cycle hook, and trigger display of body height */
    componentDidMount() {

      this.displayCurrentTimeLine()
    }
}

에서는, 「」를 호출합니다.displayCurrentTimeLine()componentDidMount()훅(첫 번째 " " " " 됩니다")render()를 사용하여 양쪽이 '''로 되어 있는지 합니다.refs이 이들 하기 전에 됩니다.displayCurrentTimeLine()

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/55248483/react-ref-current-is-null