反应高阶组件以向渲染的JSX添加自定义属性

Question

I'm trying to write a React Higher Order Components to add a custom attribute "test_id" to the view of a wrappedComonent, I need that auto-genrated attribute to do some UI testing later. but I have not find a way to achieve that.

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;

I've also tried the below version but I got that error: 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

EDIT

According to the comments we discussed below, I misunderstood the question before and I revised my answer.

The way you use in http://pastebin.com/0N9kKF73 should be the best way to do what you want.

I've tried to make a function that returns React.creatElement() to make a copy and assigned the extra props for ComponentToWrap but failed because of two main reasons.

1. React.creatElement() needs a param type .
2. ReactJS supported HTML attributes

REF:

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

The revised version from your pastebin and the internet.

 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> 

Answer 2

I suppose this is what are you trying to find. ref may do all magic for you. Actually i dont have any others idea how to add custom component. fiddle

export function SelectWrapper(Select){
  return class Wrapper extends Component {
    componentDidMount(){
      var element = ReactDOM.findDOMNode(this.refs.test);
      element.setAttribute('custom-attribute', 'some value');
    }
    ...
    render(){
      return <Select {...this.props} ref='test'/>
    }
  }
}