React JSX - 动态html属性

Question

在JSX中，我们可以动态地指示属性值，如：

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

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

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

这意味着，一旦emptyValue为真，＆＃34;输入＆＃34;标签不应包含＆＃34;值＆＃34; attribute（value =＆＃34;＆＃34;与no value属性不同，因为一个在输入字段中显示为空，另一个在输入字段中显示现有文本）。

Answer 1

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

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

注意value始终是一个对象。

Answer 2

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

render() {

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

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