Question

当我部署导航栏时，组件'PieDePagina'移动到底部144px（因为它在STYLE.contentStyleActive中定义），这是由于这个CSS修改，但我不知道如何解决它。 / p>

还有其他问题..如何在calc函数中设置CSS参数？（在我的常规样式中，我有我想要的属性TOP：numberOfMenuItems * -48px）。

还有一个问题：如何在const STYLE中设置一个param height = $（'。contenedor'）。heigh（）（一个依赖于其他的param）和JQuery？

这是我的AppBar +抽屉的代码：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
/*
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
*/

const STYLES = {
title: {
    cursor: 'pointer'
},
titleStyle: {
    textAlign: 'center'
},
displayMenuTrue: {
    position: 'relative'
},
displayMenuFalse: { 
    display: 'none'
},
contentStyle: {
    transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)',
    marginLeft: '0px',
    top: '0px'
},
contentStyleActive: {
    marginLeft: '256px',
    position: 'relative',
    top: '-144px'
}
};

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        drawerOpen:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */

    console.log(this.state.drawerOpen)
    this.state.drawerOpen = true;
    console.log(this.state.drawerOpen)

}

controlMenu = () => {
    if (this.state.drawerOpen) {
        console.log(this.state.drawerOpen)
        this.setState({ 
            drawerOpen: false 
        });

        $('.contenedor').css(STYLES.contentStyle);
    } else {
        console.log(this.state.drawerOpen)
        this.setState({ 
            drawerOpen: true 
        });


$('.contenedor').css(STYLES.contentStyle).css(STYLES.contentStyleActive);
    }
}

render() {
    return (
        <div>
            <AppBar
                title={<span style={STYLES.title}>- PLATAFORMA DE 
INCIDENCIAS -</span>}
                onTitleTouchTap={this.handleTouchTap}
                titleStyle={STYLES.titleStyle}
                iconElementLeft={this.state.drawerOpen ?  <IconButton>
<NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
                onLeftIconButtonTouchTap={this.controlMenu}
            />
            <Drawer 
                open={this.state.drawerOpen}
                containerStyle={this.state.drawerOpen ? 
STYLES.displayMenuTrue : STYLES.displayMenuFalse}
            >
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
            </Drawer>
        </div>
    );
}
}

这是我导入我的组件（名为MenuAlumno）的地方，它也显示了PieDePagina，这个组件被移动到页面底部144px：

render() {
    return (
        <div>
            <Cabecera/>
            <MenuAlumno/>
            <div class="contenedor">
                eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
            </div>
            <PieDePagina/>
        </div>
    );

谢谢大家。

Answer 1

答案的答案在这里：

How could I do this things in jQuery?

与PieDePagina＆＃39;相关只需添加一个css规则，将其上传到Xpx。再见。

为Drawer-AppBar Material UI ReactJS设置CSS

1 个答案: