- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
与我合作的设计师非常希望多列文本的行数相等。它适用于一本相当简单的电子书,但当我获得高度时,有时它会正确呈现,而有时则不会。图片供引用:
因此,我的目标(有时也在工作)是让呈现的 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
最佳答案
这是一个CSS问题:offsetHeight和height在css中有不同的定义,理解这一点很重要。如果您使用读取一个并使用该值设置另一个,那么事情就会出错。无论您是使用 React 来执行此操作还是使用任何其他框架,都没有关系。
因为读取的高度不包括边距,所以太小了。因此 css 通过牺牲边距来显示内容进行补偿。
举个例子:
offsetHeight
是 48px。 (不包括边距)height
设置为 48px。生成的总高度(包括边距)现在设置为 48 像素。要解决此问题,您需要在将高度传递给 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/
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[text(text - text text) !text]。这里的文本实际上可以是任何字符。并且间距很重要。文本将如图所示列出。 我已经
这个问题在这里已经有了答案: Remove duplicate commas and extra commas at start/end with RegExp in Javascript, and
我有以下代码。 from xml.dom.minidom import Document doc = Document() root = doc.createElement('root') doc.a
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Find text string in jQuery and make it bold 如何使用 jQuer
我使用 libmagic 在我的元素的 Web 界面中获取文件的 MIME 类型。我在 css 和 js 文件上得到文本/纯 mime 类型。 例如 chromium 显示以下警告: Resource
起初我必须阅读很多教程,但我仍然不知道我做错了什么...... 我想内联使用 4 个 div。在我想放置的那些 div 中:文本、图像、文本、文本。我希望中间文本自动设置为最大宽度。 我写了一个简单的
我想替换所有出现的 [b: "text"]至text使用 JavaScript 和 RegEx。目前我知道如何替换 [b: ""]至使用'/\[b: ""\]/g'但我不知道如果 " 之间有文本该怎么
这可能是一个幼稚的问题,但我想知道是否有比使用 text() 更好的方法将文本添加到绘图中。注意,我也在使用 layout()以及。具体来说,我有一个情节的一部分,我想在其中添加一些带有标题的文本,然
我必须反复从 latex 源粘贴代码,因此每次都必须做很多查找和替换操作('“a'=>'ä','” o'=>'ö',...) 。 有没有一种方法可以存储这些搜索和替换规则,例如,我可以通过一次按键执行
当我在Sublime Text 3代码屏幕中编写代码时,它连续地向右滑动,如图所示。我该怎么办? 请注意第10行。 最佳答案 如果您只想为当前 View (正在编辑的当前文件)激活自动换行,只需vie
是否有可能更改 sublime text 中的默认字体目录?我只想使用可移植 sublime 文本存储在我的 pendrive 上的字体,这样我就不必在我使用可移植 sublime 文本的每台机器上安
我是 Android 开发的新手,我有一个愚蠢的问题。如何将“文本字段”框放在一行中的文本旁边。 例子: Please Enter the number: [ ] 关于 "t
我想自动将“我的文本”更改为“我的文本”,因为这是用德语写的正确方式。引号可以在文本中的任何位置。 有没有一种简单的方法可以实现这一点? 解决方案应该检查第一个字符,最后一个字符,比如“this”,或
我想知道是否有特殊的语法来绑定(bind)与现有文本连接的文本。 像这样。 显然,这行不通。 什么是最佳实践? 使用 SL4。 最佳答案 使用StringFormat在 Binding 上。 WPF
我认为它应该打印“真实文本”,因为它相当于 true console.log('true text' || true ? 'text' : 'text1'); 但是,输出是“文本”;抱歉,如果是愚蠢的
有没有办法通过 css 打破文本,以便中间有一个“空白”?目前我正在通过手工打破文本来解决这个问题 -但这是愚蠢的。我知道有一个函数可以让文本在另一个 div 中结束和开始,但 IE 不支持它。 文本
我想为我的Tcl/Tk工具实现一个效果:在text控件中,根据具体情况,希望高亮一些线条的背景色,其他线条正常透明.有可能吗? 我尝试了一些选项,例如:-highlightbackground 、-i
我正在尝试解析原始维基百科文章内容,例如the article on Sweden ,使用re.sub()。但是,我在尝试替换 {{some text}} block 时遇到了问题,因为它们可以包含更
我试图先删除 ComboBox 中的所有内容。然后在其前面添加文本,但保留了一些旧文本。有没有办法重置或清除 ComboBox?或者我怎样才能最好地实现这一目标? public void GetBad
我知道我们应该创建 Example对象并将其传递给 nlp.update() 方法。根据 docs 中的示例, 我们有 for raw_text, entity_offsets in train_da
我是一名优秀的程序员,十分优秀!