Created
June 19, 2017 12:40
-
-
Save ar5had/e2a06e2e7127a97b994f3f1cc06f7db1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Suppose we want a div to have some custom attributes, normally react wouldn't allow custom attributes | |
// so this is a hack to att as much custom attributes to your component as you want | |
class Div extends React.Component { | |
componentDidMount() { | |
this.addAttributes(); | |
} | |
componentWillReceiveProps(nextProps) { | |
this.addAttributes(); | |
} | |
addAttributes() { | |
this.props.attributes.forEach(attr => (this.button.setAttribute(attr.name, attr.value))); | |
} | |
render() { | |
const {className, id} = this.props; | |
return ( | |
<div className={className} id={id}> | |
{this.props.content} | |
</div> | |
); | |
} | |
} | |
// Now use Div component | |
const attributesObject = { | |
customAttr1: "attr1", | |
customAttr2: "attr2" | |
}; | |
<Div attributes={attributesObject} className="mydiv" id="someid" content="This is div body content"/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment