使用reactjs在HTML元素上呈现自定义属性

Question

有没有一种方法可以使reactjs在HTML元素上呈现自定义属性？ 我正在使用react使用node webkit开发此应用程序，并且我需要将webkitdirectory和mozdirectory属性添加到文件类型输入元素中才能选择目录。

谢谢

Answer 1

JSX陷阱中的 自定义HTML属性 。

如果将属性传递给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} />
  );
}

如果您想要一种更具声明性的方法，则可以将此行为移入mixin，以便在组件之间共享它。

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

然后使用适当的值调用该函数以创建混合本身。

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

Answer 2

ReactJS的ES6不支持mixins。

我用这个代码

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

和

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

上传整个文件夹