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

Question

• 如何在计算函数中设置 CSS 参数？ （在我的 const STYLES 中，我有我想要的属性 TOP：numberOfMenuItems * -48px）。

• 如何在 const STYLE 中设置参数 height = $('.contenedor').heigh()（取决于 div 高度的参数）？

代码是：（我想在参数 top 和 height 上添加我的常量 STYLES 这两个点，正如我在这篇文章的最后描述的那样）

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

所以...我想要这个：在我不变的 STYLES 中想要修改（更改是在最后一个元素 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()，这取决于你是否想要包含一个元素padding/margin/border。 http://api.jquery.com/height/

所以在你的例子中；

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

Answer 2

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

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

将 jquery 安装到您的项目中：

npm install --save jquery

然后 import $ from 'jquery' :

编辑版本 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 = {...} 声明中，该声明将在元素出现在页面上之前计算（因此，当时 jQuery 无法“看到”那些 DOM 元素，也无法知道它们的高度或长度）