React JSX-动态html属性

Question

在JSX中，我们可以像下面这样动态地指示属性值：

<div className={this.state.className}>This is a div.</div>

是否可以动态指示属性（包括属性名称和属性值）？ 喜欢：

const value = emptyValue ? "" : "value='test'";
<input {value} />

这意味着，一旦emptyValue为true，“ input”标签就不应包含“ value”属性（value =“”与no value属性不同，因为一个在输入字段中显示为空，另一个在输入字段中显示现有文本）。

Answer 1

ES6对象扩展仅适用于对象。 因此，要生成动态属性，请尝试如下操作：

const value = emptyValue ? {} : { value: 'test' }
<a  {...value} ></a>

注释value将始终是一个对象。

Answer 2

您可以在render函数的if语句中插入整个元素，但是在return之前是这样的：

render() {

var input = (<input />);
if (!emptyValue) {
    input = (<input value='test'/>)
}

return (
    <div>
        {input}
    </div>
    )
}