Question

有没有办法让reactjs在HTML元素上呈现自定义属性？我正在用node webkit使用react开发这个应用程序，我需要将webkitdirectory和mozdirectory属性添加到文件类型输入元素，以便能够选择目录。

感谢

Answer 1

来自JSX Gotchas的

自定义HTML属性。

如果将属性传递给HTML规范中不存在的本机HTML元素，React将不会呈现它们。如果要使用自定义属性，则应在其前面加上数据 - 。

如果必须使用不带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]);
      });
    }
  };
}

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

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'/>

上传整个文件夹

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

2 个答案: