Как передать контекст?
Допустим есть такой React-компонент, вопрос в том, как передать контекст вызова отсюда:
this.benefitPanel = React.createRef();
this.waveBackground = React.createRef();
this.waveBackgroundWrapper = React.createRef();
this.portfolioPanel = React.createRef();
this.animationBG = React.createRef();
В this.animationElements
Видимо из-за неправильного контекста вызова, если попробовать достать DOM элемент таким образом console.log(this.animationElements[0].ElementNode), мы получим null
class App extends React.Component {
constructor() {
super();
this.benefitPanel = React.createRef();
this.waveBackground = React.createRef();
this.waveBackgroundWrapper = React.createRef();
this.portfolioPanel = React.createRef();
this.animationBG = React.createRef();
this.animationElements = [{
name: 'benefitPanel',
class: 'benefit-panel',
ElementNode: this.benefitPanel.current,
},
{
name: 'waveBackground',
class: 'wave-background__item',
ElementNode: this.waveBackground.current,
},
{
name: 'waveBackgroundWrapper',
class: 'wave-background',
ElementNode: this.waveBackgroundWrapper.current,
},
{
name: 'portfolioPanel',
class: 'portfolio-panel',
ElementNode: this.portfolioPanel.current,
func: function() {
console.log(this);
}
},
]
}
}Как описано в справке значение свойства current становится доступно после render.
Так как, в приведенном коде обращение к current идет в конструкторе - значение свойства в этот момент - null, и именно это значение записывается в массив.
class App extends React.Component {
constructor() {
super();
this.ref = React.createRef();
console.log(1, this.ref.current);
}
componentDidMount() {
console.log(3, this.ref.current);
}
render() {
console.log(2, this.ref.current);
return ( <div ref = {
this.ref
} > 1 </div>);
}
}
ReactDOM.render(
<App /> ,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>Для решения достаточно сохранять в ElementNode не current, а само поле, например:
ElementNode: this.benefitPanel,
Тогда после render можно будет обратиться к current: ElementNode.current
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
- Почему SERVER_ADDR имеет не тот IP 47563 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23632 visits
- Как через css изменить цвет png изображения? 10350 visits
- Blob video url download 9959 visits
- Php curl запрос через прокси с авторизацией 9212 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 26.11.2024 | 19:36