React Admin页面无法正确呈现

问题描述 投票:-1回答:2

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

user-interface react-admin
2个回答
0
投票

我不知道你为什么会遇到这些问题,这种描述太过通用了,似乎你不知道问题是什么,可能是由于对该地区不熟悉。无论哪种方式,您似乎遇到的问题可能与CSS有关,这是一种为您的页面提供样式的方式。但是React Admin不直接使用CSS,你可以这样使用它,但是为了更加动态地设置页面样式,Material-ui库使用一个名为JSS的东西来应用样式。

有许多库一起使用以生成React Admin,您应该了解最重要的库以便做一些奇特的事情。我对你的建议,因为你是新手,你假装使用React Admin,首先使用React Admin提供的内容,当你习惯使用这些组件并且一般掌握框架是如何工作的,之后开始实现你自己的组件与React Admin没有直接关系,但使用了一些相同的React Admin库。

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


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>;
}
}
© www.soinside.com 2019 - 2024. All rights reserved.