Добавить / удалить класс в дочерний компонент div из родительского компонента, используя refs - PullRequest
Новая
       28

Добавить / удалить класс в дочерний компонент div из родительского компонента, используя refs

0 голосов
/ 18 февраля 2020

Я хочу добавить / удалить класс внешнего div дочернего компонента из Parent Component по нажатию кнопки меню боковой панели (в родительском компоненте). При нажатии кнопки переключения SidNav разверните навигационную панель и добавьте класс во внешний div дочернего компонента, чтобы содержимое сдвигалось вправо.

Попытка: передача ref в качестве подпорки - я получаю ссылку, но фактический дочерний домен не обновляется, когда класс применяется из родительского компонента.

Любые предложения будут полезны.

Фрагмент:

Родительский компонент: 

return(<Child ref={this.ref} navigation={navigation} searchParams={parsedQuery} />)

дочерний компонент: 

function render() {
  const { navigation, classlg2, ref } = this.props;
  return (
    <div className="bx--grid page-content--wrapper">
      <div className="bx--row">
        <div
          ref={ref}
          className={
            navigation.length > 0
              ? "bx--col-lg-2 bx--col-lg-14"
              : "bx--col-lg-16"
          }
        >
          {routeComponentsElements}
        </div>
      </div>
    </div>
  );
}

bx--col-lg-2 - это класс, который мне нужно добавить и удалить при переключении SideNav.

Если для обработки className используются состояния, то содержимое перезаписывается. Пример: в дочернем компоненте ajax вызывается, при нажатии на кнопку menubutton она перезаписывает страницу, возвращаясь на свою домашнюю страницу.

1 Ответ

0 голосов
/ 18 февраля 2020

Сделайте что-то подобное.

Родительский компонент 

this.state = {
  childClass: false
}

toggleChildClass = () => {
  this.setState(prevState =>({
    childClass: !prevstate.childClass
  }))
}

render(){
  const {childClass} = this.state;

  return(
    <>
        <button onClick={this.toggleChildClass}>Toggle Class</button>
        <ChildComponent childClass={childClass} />
    </>
  )
}

Дочерний компонент 

render(){ 
    const { childClass } = this.props;
    return(
        <div 
            className={childClass ? "bx--col-lg-2 bx--col-lg-14" 
                                  : 'bx--col-lg-16'}> 
          {routeComponentsElements} 
        </div>
     )
 }
...