使用引用将类从父组件添加/删除到子组件div

Question

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时需要添加和删除的类。

如果使用状态来处理类名，那么内容重新发送器…示例：在子组件中有一个ajax调用，当单击menubutton时，它会重新编辑页面并返回其主页。

Answer 1

做这样的事。

父组件

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>
     )
 }