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>
    )
}