Как передать и обновлять значение параметра в react?

Question

[Евгений Попов]

Есть параметр на уровне app
он передается подобным образом и при render видим:
<Header topbarVisible={this.topbarVisible} />
Но при обновлении его значения нет эвента и не меняется значение внутри компонента.
Вопрос: почему?

Comments

[copal]

а что у Вас такое this.? может this.props.?

Answer 1

[Максим]

"Нужно больше кода".

Тем не менее, предположу:
а) при изменении topbarVisible "где-то там" - значение не изменяется (передается undefined/другое свойство, и topbarVisible остается не тронутым)
б) параметр изменяется, но в цепочке родителей-потомков есть shouldComponentUpdate, который блокирует изменение.

Нужно проверить всю цепочку. Где изменяется topbarVisible? В этом компоненте с помощью console.log / debugger посмотреть изменяется ли. Если все ок - идти дальше по цепочке, и смотреть в какой из компонентов новое значение props не пришло (либо console.log в componentWIllReceiveProps, либо debugger по шагам (кнопочка play), либо просто react панель-разработчика в консоли).

update: поздно заметил, почему у вас this.topbarVisible? Это разве не свойство, которое пришло в props? Если вы используете state, все равно не ясно зачем свойство подключать через this.

Comments

[Евгений Попов]

componentDidMount(){
window.addEventListener('scroll', this.handleScroll);
}
componentWillMount() {
const { insertCss } = this.props.context;
this.removeCss = insertCss(s);
}

componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
this.removeCss();
}

handleScroll(event) {
let scrollTop = event.srcElement.body.scrollTop;
let h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
let half = h / 2;
var lim = half;
var topbar = document.querySelector('#topbar');

if(scrollTop > lim){
this.topbarVisible = true;
}else{
this.topbarVisible = false;
}
console.log('scroll',this.topbarVisible);
}

[Максим]

Евгений Попов: если у вас в этом фрагменте кода this.topbarVisible корректно изменяется, то вам нужно устанавливать значение в state компонента. Добавьте: this.setState({visible: this.topbarVisible }) после строк с true/false в if'e
В таком случае, ваш компонент будет реагировать на изменение переменной и перерисовываться, и всех детей перерисовывать и т.д,

[Максим]

ну и само собой, в коде компонента (в render функции), нужно будет использовать не this.topbarVisible, а this.state.visible