Created
April 21, 2017 18:32
-
-
Save flarnie/db011bf54206f30b9983cd4dc674c82e to your computer and use it in GitHub Desktop.
fixture used to test the deduping of unknown prop warning in React v15.6
This file contains 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
| <!DOCTYPE html> | |
| <html style="width: 100%; height: 100%; overflow: hidden"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Unknown Props Example</title> | |
| </head> | |
| <body> | |
| <h1>Unknown Props Example</h1> | |
| <div id="container"> | |
| <p> | |
| To install React, follow the instructions on | |
| <a href="https://github.com/facebook/react/">GitHub</a>. | |
| </p> | |
| <p> | |
| If you can see this, React is <strong>not</strong> working right. | |
| If you checked out the source from GitHub make sure to run <code>npm run build</code>. | |
| </p> | |
| </div> | |
| <script src="../../build/react.js"></script> | |
| <script src="../../build/react-dom.js"></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.js"></script> | |
| <script type="text/babel"> | |
| class FragmentsExample extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| counter: 0, | |
| }; | |
| } | |
| triggerReRender = () => { | |
| this.setState({ | |
| counter: ++this.state.counter, | |
| }); | |
| } | |
| render() { | |
| const warningTriggerComponents = []; | |
| const warningTriggerComponentsTwo = []; | |
| for (let i = 0, len = this.state.counter; i < len; i++) { | |
| warningTriggerComponents.push( | |
| <div foo="a" bar="b" baz="c">{i}</div> | |
| ); | |
| warningTriggerComponents.push( | |
| <span foo="a" bar="b" baz="c">{i}</span> | |
| ); | |
| } | |
| return ( | |
| <div> | |
| <button onClick={this.triggerReRender}> | |
| Trigger a re-render! | |
| </button> | |
| <div>You've re-rendered {this.state.counter} times.</div> | |
| <div><span meow="test">Test!</span></div> | |
| <div><span hello="world">Test2!</span></div> | |
| {warningTriggerComponents} | |
| {warningTriggerComponentsTwo} | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render( | |
| <FragmentsExample />, | |
| document.getElementById('container') | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment