React JSX - 动态 html 属性答案

【问题标题】：React JSX - dynamic html attributeReact JSX - 动态 html 属性
【发布时间】：2017-03-28 20:24:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

为什么不<input value={emptyValue ? "" : "test"}>？
@AndrewLi 你是对的。虽然我希望emptyValue 为真，但“输入”中不应存在“值”属性。
你当然可以把它变成一个对象，比如：const props = { value: "test", otherProp: "blah" } 然后<input {...props}>
value={emptyValue ? null : "test"}

【解决方案1】：

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

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

注意value 永远是一个对象。

【讨论】：

但它是一个字符串，而不是一个对象。
let obj = {}; if(emptyValue) { obj.value = "test" } <a {...obj} ></a> 这就是我要说的

【解决方案2】：

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

render() {

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

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

【讨论】：