Question

我稍微有点新的反应和ES6一般，我正在尝试创建一个连接到导航栏的可恢复的应用程序抽屉组件。

我正在尝试使用类名npm包根据传入组件的props.isLeft的值有条件地将Dawer组件渲染到屏幕的右侧或左侧但是我遇到了一些我认为可能与之相关的奇怪到组件生命周期或javascripts奇怪的psuedo类的实现，但我不确定哪...

export default class Drawer extends  Component {
    constructor(props){
        super(props);
        const {isOpen,isLeft} = props;
        const aligned = cx({
            [styles.drawer_left] : this.isLeft,
            [styles.drawer_right] : !this.isLeft,
        });
        this.state = {
            isOpen: isOpen
        }
    }

    render(){
        console.log(this.aligned);
        return(
            <div className={this.aligned}>
                {this.props.children}
                djkdjd
            </div>
        )
    }

}

日志语句告诉我对齐的属性是未定义的，但这对我来说很困惑。如果我将const更改为＆＃39; this.aligned＆＃39;，则在构造函数之外定义对齐。我相信这是因为它是在Drawer原型上创建的对象，但是我没有＆＃ 39;理解为什么会这样？如果你不能声明一个常量，我也对在基于类的组件内构造对象的正确方法感到困惑？你会使用点差运算符还是object.assign？

我知道我可以通过使组件无状态来解决这个问题，它可以正常工作，我相信我已经读过有一个es6功能允许你完全删除构造函数调用并定义属性直接上课。但是我问，因为我只是想更多地理解这种语言以及为什么这不起作用？

Answer 1

构造函数中的局部变量和常量不会自动成为实例的属性。只有您专门作为属性分配给实例的那些。 aligned永远不会保存为实例上的属性。它只是构造函数中的局部常量。您的isLeft也是如此。

要将aligned设为属性，请指定this.aligned;由于isLeft 不是属性，请勿使用this.isLeft来访问它：

    this.aligned = cx({
//  ^^^^^
        [styles.drawer_left] : isLeft,
// ----------------------------^
        [styles.drawer_right] : !isLeft,
// ------------------------------^
    });

（或者如果你想让它成为一个isLeft属性。）

类构造函数中定义的属性在render（）中未定义

1 个答案: