React Admin页面无法正确呈现

时间:2018-07-20 15:15:00

标签: user-interface react-admin

我是UI编码的新手,开始使用react-admin放置一些简单的页面。一切顺利,我们能够正确托管页面。但是我们注意到随机的问题,其中背景图像填满了整个屏幕,有时整个页面都缩小到了汉堡菜单。我已禁用registerServiceWorker以停止将我的页面缓存。不知道这是否导致怪异的UI行为。

2 个答案:

答案 0 :(得分:0)

我不知道为什么会遇到这些问题,描述过于笼统,似乎您不知道问题可能是什么,可能是由于该领域是新手。无论哪种方式,您似乎遇到的问题都可能与CSS有关,这是一种为页面赋予样式的方式。但是React Admin并不直接使用CSS,您可以那样使用CSS,但是为了更动态地设置页面样式,Material-ui库使用了一种名为JSS的样式来应用样式。

为了产生React Admin,有许多库被一起使用,您应该了解最重要的库才能做一些花哨的事情。自从您是新手以来,我就给您的建议是,您假装使用React Admin,首先使用React Admin提供的功能,并在感到满意时使用该组件并大致了解框架的工作原理,然后开始实施自己的组件与React Admin没有直接关系,但是使用一些相同的React Admin库。

还要检查您是使用<Admin>组件来创建React Admin应用程序,还是将React Admin嵌入另一个应用程序中,因为第二个应用程序更可能产生错误。

答案 1 :(得分:0)

经过一些调试后,我认为我已找出导致此问题的原因。我有一个自定义按钮来复制一行(基本上是在新ID上发布创建并路由到编辑页面)。由于某种原因,该按钮的呈现似乎不一致地导致了此问题。实际的按钮可以正常工作,但会导致这种不一致的行为。以下是该按钮的代码。以下内容是否有任何问题?:

export default class DuplicateButton extends Component {

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = ({ redirect: false });
    var redirectPath = '';

}

handleClick = (props) => {
    var
        {
            push, record, resourceName
        } = this.props;
    let tempRecord = record;
    var result = '';
    console.log(this.props);
    var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
        result = resp.data;
        let routePath = '/' + this.props.resource + '/' + result.id;
        console.log(routePath);
        this.redirectPath = routePath;
        this.setState({ redirect: true });
        return result;
    });

}

render() {
    if (this.state.redirect) {
        console.log('Redirect to Edit page');
        return <Redirect push to={this.redirectPath} />;
    }

    return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}