javascript - React 高阶组件向渲染的 JSX 添加自定义属性

Question

我正在尝试编写一个React高阶组件来将自定义属性“test_id”添加到wrappedComonent的 View 中，我需要该自动生成的属性稍后进行一些UI测试。但我还没有找到实现这一目标的方法。

import React, {Component, PropTypes} from "react";
const wrapTestableComponent = (ComponentToWrap) => {

class TestableComponent extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return <ComponentToWrap  {...this.props} test_id={this.props.test_id} />;
    }
}

TestableComponent.propTypes = {
    test_id: PropTypes.string.isRequired,
}

return TestableComponent
}
export default wrapTestableComponent;

我也尝试了以下版本，但出现了错误:Uncaught TypeError: Can't add property test_id, object is not extensible

import React, {Component, PropTypes} from "react";

const wrapTestableComponent = (ComponentToWrap) => {

class TestableComponent extends Component {

    constructor(props){
        super(props);
    }

    render() {
        var wrappedComponentView = <ComponentToWrap  {...this.props} />;
        wrappedComponentView.test_id = this.props.test_id;
        return <ComponentToWrap  {...this.props} />;
    }
}

TestableComponent.propTypes = {
    test_id: PropTypes.string.isRequired,
}

return TestableComponent
}
export default wrapTestableComponent;

Answer 1

编辑

根据我们下面讨论的评论，我之前误解了这个问题，所以修改了我的答案。

你在http://pastebin.com/0N9kKF73中使用的方式应该是做你想做的事情的最佳方式。

我尝试创建一个返回 React.creatElement() 的函数来制作副本，并为 ComponentToWrap 分配额外的 Prop ，但由于两个主要原因而失败.

1. React.creatElement() 需要一个参数type。
2. ReactJS supported HTML attributes

引用:

1. Get HTML tag name from React element?
2. React: Can I add attributes to children's resultant HTML?

来自您的 Pastebin 和互联网的修订版本。

const wrapTestableComponent = (ComponentToWrap) => {

  class TestableComponent extends React.Component {
  
    componentDidMount() {
      ReactDOM.findDOMNode(this.wrappedRef).setAttribute('test_id', this.props.test_id);
    }
 
    render() {
      return <ComponentToWrap {...this.props} 
        ref={() => { this.wrappedRef = this; }} 
      />;
    }
  }

  TestableComponent.propTypes = {
      test_id: React.PropTypes.string.isRequired,
  }

  return TestableComponent
}

const TestComp = (props) => (<div>Here is the TestComp</div>)

const NewComponent = wrapTestableComponent(TestComp)

ReactDOM.render(<NewComponent test_id="555" />, document.getElementById('View'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>