[英]React JSX - dynamic html attribute
In JSX, we can indicate attribute value dynamically like: 在JSX中,我们可以像下面这样动态地指示属性值:
<div className={this.state.className}>This is a div.</div>
Is it possible to indicate attribute (including attribute name and attribute value) dynamically? 是否可以动态指示属性(包括属性名称和属性值)? Like:
喜欢:
const value = emptyValue ? "" : "value='test'";
<input {value} />
That means, once emptyValue
is true, "input" tag should not include "value" attribute (value="" is different from no value attribute, as one is show empty in input field, another is show existing text in input field). 这意味着,一旦
emptyValue
为true,“ input”标签就不应包含“ value”属性(value =“”与no value属性不同,因为一个在输入字段中显示为空,另一个在输入字段中显示现有文本)。
ES6 object expansion only works for objects. ES6对象扩展仅适用于对象。 Therefore to generate a dynamic attribute, try something like this:
因此,要生成动态属性,请尝试如下操作:
const value = emptyValue ? {} : { value: 'test' }
<a {...value} ></a>
Note value
will always be an object. 注释
value
将始终是一个对象。
you can insert whole element in if
statement in render function, but before return
like this: 您可以在render函数的
if
语句中插入整个元素,但是在return
之前是这样的:
render() {
var input = (<input />);
if (!emptyValue) {
input = (<input value='test'/>)
}
return (
<div>
{input}
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.