消息关闭
    暂无新消息!

第一次倒腾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;



1个回答

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

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