Javascript 如何在react中更改按钮单击时不同组件的样式？

我想应用一个100%的宽度，我的导航栏点击一个按钮。最初，它将是0%（隐藏）。 为此，我使用一个状态来跟踪导航栏的宽度，然而，我的状态似乎不会改变onclick

class Navbar extends Component {
  constructor(){
    super();
    this.state = {
      sidenav: {
        width: '0%',
      }
    }
  }

  showNavBar = () => {
    this.setState({
      sidenav: {
        width: '100%',
      }
    })
  }

  render(){
    return(
      <div>
        <div className ="sidenav" style ={{width : this.state.sidenav.width}}>
          <NavLink exact to="/">Home</NavLink>
          <NavLink exact to="/about">About</NavLink>
          <NavLink exact to="/portfolio">Portfolio</NavLink>
          <NavLink exact to="/contacts">Contacts</NavLink>
          <div className="content">
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/portfolio" component={Portfolio} />
            <Route exact path="/contacts" component={Contacts} />
            </div>
        </div>
        <NavbarButton onClick={this.showNavBar}/>
      </div>
    )
  }
};

类导航栏扩展组件{
构造函数（）{
超级（）；
此.state={
侧导航：{
宽度：“0%”，
}
}
}
showNavBar=（）=>{
这是我的国家({
侧导航：{
宽度：“100%”，
}
})
}
render（）{
返回(
家
关于
文件夹
联络
)
}
};

有人能指出我哪里出了错吗

编辑：

所以我遵循了你们发布的示例，只有当我在render函数中显式地给出

这是我的导航按钮代码，也许有人能理解为什么它错了

const NavbarButton = (props) => {
  return (
    <button style = {style} onClick = {props.showNavBar}>☰</button>
  )
}

const-NavbarButton=（道具）=>{
返回(
☰
)
}

您的代码工作正常，即宽度从0%到100%

下面是一个源于您提供的代码的codesandbox

---

如果要在单击时显示导航栏，则可能使用display属性而不是width。

您的代码工作正常，即宽度从0%到100%

下面是一个源于您提供的代码的codesandbox

---

如果要在单击时显示导航栏，则可能使用“显示”属性而不是“宽度”。

使用CSS显示属性

import React，{Component}来自“React”；
类导航栏扩展组件{
构造函数（）{
超级（）；
此.state={
showNavBar:错误
};
}
showNavBar=（）=>{
这是我的国家({
showNavBar：对
});
};
render（）{
返回(
家
关于
文件夹
联络
);
}
}
导出默认导航栏改用CSS显示属性


import React，{Component}来自“React”；
类导航栏扩展组件{
构造函数（）{
超级（）；
此.state={
showNavBar:错误
};
}
showNavBar=（）=>{
这是我的国家({
showNavBar：对
});
};
render（）{
返回(
家
关于
文件夹
联络
);
}
}
导出默认导航栏所以问题是因为我不知道如何正确地将道具传递给子组件

 const NavbarButton = (props) => {
  return (
    <button style = {style} onClick = {props.showNavBar}>☰</button>
  )
}

const-NavbarButton=（道具）=>{
返回(
☰
)
}

我的代码应该是

<NavbarButton showNavBar={this.showNavBar}/>



天哪，我现在觉得自己好蠢
 所以问题是因为我不知道如何正确地将道具传递给子组件

 const NavbarButton = (props) => {
  return (
    <button style = {style} onClick = {props.showNavBar}>☰</button>
  )
}

const-NavbarButton=（道具）=>{
返回(
☰
)
}

我的代码应该是

<NavbarButton showNavBar={this.showNavBar}/>



天哪，我现在觉得自己好蠢
 你看到这个问题了吗：你的状态没有改变或者样式没有更新？在
render（）
函数中执行
console.log（this.state）
以查看单击后统计信息是否更新。您的
css
有问题。代码运行良好。检查我快速创建的这个codesandbox示例，您看到这个问题了吗：您的状态没有改变，或者样式没有更新？在
render（）
函数中执行
console.log（this.state）
以查看单击后统计信息是否更新。您的
css
有问题。代码运行良好。检查我快速创建的这个代码沙盒示例