antd/antd-mobile， Drawer组建内容不显示

Question

第一次倒腾antd/antd-mobile， Drawer组建内容不显示,麻烦大家帮忙看看。
贴上代码：

import React, { Component } from 'react';
import { Drawer, List } from 'antd-mobile';

class CategoryDrawer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            open: true,
            position: 'left'
        };

        this.getSidebar = () => (
            <div>
                <h1>分类内容</h1>
                <List>
                    {
                        Array(20).map((i, index) => {
                            return (
                                <List.Item key={index} multipleLine>
                                    分类{index + 1}
                                </List.Item>);
                        })
                    }
                </List>
            </div>
        );

        this.sidebar = '';
    }

    componentDidMount() {
        console.log('change sidebar');
        this.sidebar = this.getSidebar();
    }

    onOpenChange() {
        console.log(this.state.open);
        alert(this.state.open);
    }

    render() {
        return (
            <div>
                <Drawer
                    open={this.state.open}
                    onOpenChange={this.onOpenChange.bind(this)}
                    sidebar={this.sidebar}
                    docked={false}
                    contentStyle = {{
                        backgroundColor: '#fff'
                    }}
                >
                   { this.sidebar }
                </Drawer>
            </div>
        );
    }

}

export default CategoryDrawer;

Answer 1

• componentDidMount 之后 this.sidebar 才被赋值，但是没有 state 或 props 的变更， react 是不会 rerender 的。

• 建议你先学习一下 react 更新 UI 的方式。