使用reactjs呈現HTML元素的自定義屬性

有沒有辦法讓reactjs在HTML元素上呈現自定義屬性？我正在使用react來開發此應用程序，並且需要將webkitdirectory和mozdirectory屬性添加到文件類型輸入元素以便能夠選擇目錄。使用reactjs呈現HTML元素的自定義屬性

感謝

來源

2015-11-24 kfc

自定義HTML屬性從JSX Gotchas。

如果您將屬性傳遞給HTML規範中不存在的原生HTML元素，則React將不會呈現它們。如果你想使用自定義屬性，你應該用data-作爲前綴。

如果您使用的屬性不是前綴data-，那麼您必須在組件中使用DOM API自行添加它。

giveCustomAttributes: function(input) { 
    input.setAttribute('webkit-directory', ''); 
    input.setAttribute('moz-directory', ''); 
}, 
render: function() { 
    return (
    <input type='file' ref={giveCustomAttributes} /> 
); 
}

如果你願意，你可以移動這個行爲變成一個混合，以組件之間共享一個更具聲明的做法。

function CustomAttrsMixin(refName, attrs) { 
    return { 
    componentDidMount: function() { 
     var attrNames = Object.keys(attrs), 
      element = this.refs[refName]; 

     attrNames.forEach(function(attrName) { 
     element.setAttribute(attrName, attrs[attrName]); 
     }); 
    } 
    }; 
}

然後用適當的值調用函數來創建mixin本身。

mixins: [CustomAttrsMixin('input', { 
    'webkit-directory': '', 
    'moz-directory': '' 
})], 
render: function() { 
    return (
    <input type='file' ref='input' /> 
); 
}

來源

2015-11-24 16:54:32

感謝，有你，雖然作爲的setAttribute應該叫上提供的代碼個小bug DOM節點，而不是在ref對象上。 var input = this.refs.input.getDOMNode（）; 然後我hook componentWillReceiveProps以取消設置我需要的屬性。問題解決了！ – kfc

在一段時間內不會使用'refs'。在文檔中看不到有關'getDOMNode'的任何信息，但我相信你是對的。顯然，使用字符串屬性[現在幾乎是遺留的支持]（https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute），所以我更新了回答一個更好的解決方案。 –

mixins在ReactJS的ES6中不受支持。

我使用此代碼

componentDidMount(){ 
    var input = ReactDOM.findDOMNode(this.refs.customAttributes) 
    input.setAttribute('webkitdirectory', '') 
    input.setAttribute('directory', '') 
    input.setAttribute('multiple', '') 
}

和

<input type='file' ref='customAttributes'/>

上傳整個文件夾

來源

2016-01-15 22:35:53 Russj

使用reactjs呈現HTML元素的自定義屬性

回答

相關問題