Question

如何在calc函数中设置CSS参数？（在我的常规样式中，我有我想要的属性TOP：numberOfMenuItems * -48px）。
如何在const STYLE中设置一个参数高度= $（＆＃39; .contenedor＆＃39;）。heigh（）（一个取决于div高度的参数）？

代码是:(我希望在我的常量样式中加上参数top和height上的这两点，正如我在本文末尾描述的那样）

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';


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
   }
}
}

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>
    );
}
}

所以...我想要这个：在我的常量样式中想要修改（对最后一个元素进行更改，contentStyleActive，参数top和height）：

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',
    // HERE!
    top: -48px * $('MenuItem').length(),
    height: $('#IdOfMyDiv').heigh() 
}
};

谢谢！

Answer 1

在jQuery中计算使用.length属性的项目数。 https://api.jquery.com/length/

要获取元素的高度，请使用.height()方法。注意：还有innerHeight（）和outerHeight（），具体取决于您是否要包含元素填充/边距/边框。 http://api.jquery.com/height/

所以在你的例子中;

top: parseInt(-48 * $('MenuItem').length) + 'px',
height: $('#IdOfMyDiv').height() + 'px'

Answer 2

您可以使用函数计算动态值并为其添加动态值，该元素的“style”属性将指向该函数，如下所示：

以下编辑版本（添加导入jQuery）

将jquery安装到您的项目中：

npm install --save jquery

然后从'jquery'导入$：

EDITED VERSION 2：将类名称（例如'MyClass'）添加到MenuItem组件（在渲染方法中），然后通过$（'。MyClass'）来访问.length而不是$（'MenuItem'）。length。原因是jQuery不会理解react-component（这是MenuItem），jQuery会理解DOM：$（'。MyClass'），$（'＃domID'）或类似的东西

import React from 'react';
import $ from 'jquery'; 

const STYLES = {
  // ...
  contentStyleActive: {
    marginLeft: '256px',
    position: 'relative',
  }
};

export default class MenuAlumno extends React.Component {
  constructor(props){
    super(props);
    // ...
  }

  contentStyleActiveCalculation(options){
    options.top = parseInt(-48 * $('.MyClass').length) + 'px';
    options.height = $('#IdOfMyDiv').height() + 'px';
    return options;
  }

  render() {
    // ...

    <SomeElement style={this.contentStyleActiveCalculation(STYLES.contentStyleActive)} />

    // ...
  }
}

你不能直接将计算添加到const STYLES = {...}声明中，这将在BEFORE元素出现在页面上时进行计算（所以那时，jQuery不能“看到”那些DOM元素，并且无法知道它们身高或长度）

我怎么能在jQuery中做这些事情？

2 个答案: