Почему ref не является свойством дочерних компонентов?

Question

Я недавно заметил, что в ReactJS передача ref компоненту в качестве свойства невозможна.

Вот мой код:

class A extends React.Component{
    render(){
        return <B
            ref={ref=>this.bRef = ref} 
        />
    }
}

class B extends React.Component{
    render(){
        console.log(this.props.ref) //=>undefined
        return <div
            {...this.props}
        />
    }
}

this.bRef будет неопределенным вA.Есть ли объяснение по этому поводу?

Answer 1

Есть объяснение по этому поводу?

Проблема, которую вы видите, связана с тем, что key и ref являются специальными опорами. См.

Большинство реквизитов в элементе JSX передаются компоненту, однако есть два специальных реквизита (ref и key), которые используются в React, и поэтомуне пересылается компоненту.

Например, попытка доступа к this.props.key из компонента (т. е. функции рендеринга или propTypes) не определена.Если вам нужно получить доступ к одному и тому же значению в дочернем компоненте, вы должны передать его как другой объект (например: <ListItemWrapper key={result.id} id={result.id} />).Хотя это может показаться излишним, важно отделить логику приложения от согласования подсказок.

Чтобы получить доступ к ref в child, передайте его в другой реквизит.Скажем, вы создаете ref как

const ref = React.createRef();

и затем передаете его своему компоненту, как показано ниже:

<FancyButton forwardedRef={ref} text="Click ME!" />

, где внутри FancyButton ссылка будет доступна как

 <button
      onClick={() => {
        this.logRef(forwardedRef);
      }}
      ref={forwardedRef}
    >
      {text}
 </button>

, где logRef определяется как

logRef(myref) {
    console.log(myref.current);
}

, рабочий пример можно увидеть по адресу (Нажмите на кнопку и проверьте консоль): https://codesandbox.io/s/ko6wnrorv

Answer 2

ссылка не ведет себя как обычный реквизит.Это имеет особое значение.

class A extends React.Component{
    render(){
        return <B
            ref={ref=>this.bRef = ref} 
        />
    }
}

Что это означает здесь, вы получаете ссылку на компонент 'B' в компоненте 'A'.То есть вы можете использовать this.bRef для вызова некоторых методов в компоненте 'B' из компонента 'A'

Примечание: this.bRef получит свое значение только после того, как A и B будут отображаться до тех порэто будет неопределенным.