Question

我正在尝试实施侧导航栏，就像它在本网站上的显示方式一样

https://adminlte.io/themes/AdminLTE/index2.html

现在我试图基本上模拟扩展的导航栏和迷你导航栏切换。但是，我在更新反应中导航栏的大小时遇到了问题。

这是我的导航栏组件

import React, { Component } from 'react';

class SideNavBar extends Component {

    render() {
        let sideBarStyle = {
            'height': '100%',
            'backgroundColor': 'lightblue',
            'width': "80px",
            'position': 'absolute',
            'top': '0',
            'left': '0'
          }
        setTimeout(() => {
            sideBarStyle["width"] = "300px";
        }, 1000)
        return (
            <div style={sideBarStyle}>
                sidenavbar
            </div>
        );
    }
}

export default SideNavBar;

我在那里放置了一个设置超时，因为我想快速测试是否可以从click事件扩展div的宽度。但是我收到以下错误

TypeError: Cannot assign to read only property 'width' of object '#<Object>'

如何根据点击事件更新元素的大小？

Answer 1

你能在下面试试。

import React, { Component } from 'react';

class SideNavBar extends Component {
    constructor(props){
      super(props);
      this.state = {
        width : 80
      }
    }
    componentDidMount(){
      setTimeout(() => {
            this.setState({
              width: 300
            })
        }, 1000);
    }
    render() {
        let sideBarStyle = {
            'height': '100%',
            'backgroundColor': 'lightblue',
            'width': this.state.width,
            'position': 'absolute',
            'top': '0',
            'left': '0'
          }

        return (
            <div style={sideBarStyle}>
                sidenavbar
            </div>
        );
    }
}

export default SideNavBar;

还有一件事你不需要在React中明确指定px。只是不够。 React将处理px。

根据反应中的道具更新div大小

1 个答案: