Question

我想通过单击侧边栏菜单按钮（在父组件中）从“父组件”添加/删除子组件的外部div的类。单击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时，它将使页面重新回到其主页。

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

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

1 个答案: