React JSX - 动态 html 属性

Question

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

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

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

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

这意味着，一旦 emptyValue 为真，"input" 标签不应包含 "value" 属性（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>
    )
}

React JSX - dynamic html attribute