gpt4 book ai didi

javascript - react : Getting the height of text elements

转载 作者:太空宇宙 更新时间:2023-11-04 02:31:22 25 4
gpt4 key购买 nike

与我合作的设计师非常希望多列文本的行数相等。它适用于一本相当简单的电子书,但当我获得高度时,有时它会正确呈现,而有时则不会。图片供引用:

enter image description here

因此,我的目标(有时也在工作)是让呈现的 header 循环遍历并将高度设置为三个 header 中最高的一个。在上图中,该函数应该呈现类似的 View ,但每个标题都保留其边距。相反,它计算出它们都具有相同的大小,因此边距被削减了。不幸的是,似乎(通常)在只有一个孤儿的标题上,高度计算正确。有没有人有更好的主意?我的代码如下。

Columns.js(updateHeight 是这里的重要函数)—

import React from 'react'
import { branch } from 'baobab-react/higher-order'
import classNames from 'classnames'
import _parseInt from 'lodash.parseint'
import _filter from 'lodash.filter'
import InlineSVG from 'react-inlinesvg'

// Column Components
import ImageContainer from './columns/ImageContainer'
import IconContainer from './columns/IconContainer'
import ColumnHeader from './columns/ColumnHeader'
import Content from './columns/Content'

class Columns extends React.Component {

constructor(props, context) {
super(props, context)
this.state = {
content: 0,
header: 0,
}
}

updateHeight(height, component) {
if (window.innerWidth > 768 && window.innerHeight > 768) {
if (height > this.state[component]) {
this.setState({ [component]: height })
} else {
return false
}
} else {
return false
}
}

getItems(column, index) {

let data = column[0] || column
const icon = data.icon ? '/assets/icons/' + data.icon : null
const image = data.bioImage ? '/assets/bio-photos/' + data.bioImage : null
const ref = `column${ index }`

return (
<div className="column" key={ index } ref={ ref }>
{ image ? <ImageContainer title={ data.title } image={ image } /> : null }
{ icon ? <IconContainer icon={ icon } /> : null }
<ColumnHeader
title={ data.title }
subtitle={ data.subtitle }
index={ index }
updateHeight={ this.updateHeight.bind(this) }
height={ index === undefined ? 'auto' : this.state.header } />
<Content
content={ data.content }
updateHeight={ this.updateHeight.bind(this) }
height={ index === undefined ? 'auto' : this.state.content } />
{ this.props.type === 'team'
? <div className="team__social"><InlineSVG src="/assets/icons/linkedin.svg"></InlineSVG></div>
: null
}
</div>
)
}

render() {
const data = this.props.data.columns || this.props.data
const type = this.props.type
const count = data.length || 1
let columns = count > 1 ? data.map((column, index) => this.getItems(column, index)) : this.getItems(data, 1)

let columnClasses = classNames({
'columns': true,
[`columns--${count}`]: true,
'columns--icons': type === 'icons' ? true : false,
'columns--team': type === 'team' ? true : false,
})

return (
<div className={ columnClasses }>
{ columns }
</div>
)
}
}


export default branch(Columns, {
cursors: {
navOpen: ['navOpen'],
}
})

ColumnHeader.js —

import React from 'react'
import { branch } from 'baobab-react/higher-order'

class ColumnHeader extends React.Component {

constructor(props, context) {
super(props, context)
}

componentDidMount() {
this.props.updateHeight(this.refs.header.offsetHeight, 'header')
}

render() {
let { title, subtitle } = this.props
let height = (this.props.height === 0) ? 'auto' : this.props.height
return (
<div className="column__header" ref="header" style={{ height: height }}>
<h1 className="title">{ title }</h1>
{ subtitle ? (<h2 className="subtitle">{ subtitle }</h2>) : null }
</div>
)
}
}

export default ColumnHeader

为清楚起见,第二张图片:enter image description here

最佳答案

这是一个CSS问题:offsetHeight和height在css中有不同的定义,理解这一点很重要。如果您使用读取一个并使用该值设置另一个,那么事情就会出错。无论您是使用 React 来执行此操作还是使用任何其他框架,都没有关系。

  • offsetHeight = content + padding + border(但不包括边距)
  • 高度=内容+内边距+边框+边距

因为读取的高度不包括边距,所以太小了。因此 css 通过牺牲边距来显示内容进行补偿。

举个例子:

  • 假设您的高标题的内边距为 0,顶部和底部的边距为 10 像素,内容为 2 行且内容高度为 48 像素。
  • 所以总高度是 10+48+10 = 68px。
  • 您读取的 offsetHeight 是 48px。 (不包括边距)
  • 然后将 height 设置为 48px。生成的总高度(包括边距)现在设置为 48 像素。
  • 这是错误的值。正确的值应该是 68px。

要解决此问题,您需要在将高度传递给 updateHeight() 方法之前将顶部和底部边距包含到 offsetHeight 中:

componentDidMount() {
// get topMargin and bottomMargin from DOM
let heightPlusMargins = this.refs.header.offsetHeight + topMargin + bottomMargin;
this.props.updateHeight(heightPlusMargins, 'header')
}

您可以使用 jQuery 或 vanilla javascript 来获取顶部和底部边距。两者都在 separate thread on SO here 中进行了解释.

更笼统地说:您获得等高行的总体方法似乎效率很低。您首先渲染列,然后从所有单元格读取高度,然后调整高度并重新渲染。可能有更好的整体解决方案来解决仅在 css 中的高度问题。
看起来您的列宽度相等,因此所有单元格的宽度都相等。
您还可以按行(而不是按列)呈现,仅使用 css 为每个单元格赋予相同的宽度(% 或固定)并确保同一行中的每个单元格具有相同的高度。 HTML 表格或 CSS flexbox(我更喜欢后者)是实现此目的的选项。
然后你可以简单地一次渲染,并丢失所有的引用读取、状态更新和重新渲染代码。使整体代码更简洁、更高效。

关于javascript - react : Getting the height of text elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36455410/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com