В React компонентах есть два основных способа создавать refs.
React.createRef() — это современный способ создавать refs в классовых компонентах. Этот метод создаёт объект ref, который можно прикрепить к React элементам через атрибут ref.
Чтобы использовать этот способ:
React.createRef()refclass MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
Подход с callback ref работает во всех версиях React. Вместо того чтобы передавать объект ref, ты передаёшь функцию, которая получает DOM элемент в качестве аргумента.
class SearchBar extends Component {
constructor(props) {
super(props);
this.txtSearch = null;
this.state = { term: '' };
}
setInputSearchRef = (e) => {
this.txtSearch = e;
}
onInputChange = (event) => {
this.setState({ term: this.txtSearch.value });
}
render() {
return (
<input
value={this.state.term}
onChange={this.onInputChange}
ref={this.setInputSearchRef}
/>
);
}
}
Refs в функциональных компонентах можно создавать с помощью замыканий и callback-функций, потому что React.createRef() предназначен для классовых компонентов.
Хотя инлайновые callback refs технически возможны, они не рекомендуются, так как могут вызвать лишние перерендеры при обновлениях.
React.createRef() следует вызывать внутри метода render(), чтобы гарантировать создание новой ref при каждом цикле рендера.
Новый — ещё не проверен сообществом
Вы