Last active
July 10, 2023 16:24
-
-
Save primaryobjects/64734b8fe3f54aa637f444c95f061eed to your computer and use it in GitHub Desktop.
Calling a React component's methods from outside of React. Demo https://plnkr.co/edit/E6lPrL331KGxoikGinFm?p=preview
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> | |
| <head> | |
| <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> | |
| <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> | |
| <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> | |
| <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script> | |
| <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <h1>Hello World!</h1> | |
| <button id='btnShow' type="button" class="btn btn-primary">Show</button> | |
| <button id='btnHide' type="button" class="btn btn-primary">Hide</button> | |
| <div id="translator" class='mt-5'></div> | |
| <div id="output"></div> | |
| </div> | |
| <script src="translator.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
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
| var translator = ReactDOM.render(React.createElement(Translator), document.getElementById('translator')); | |
| $(function() { | |
| $('#btnShow').click(function() { | |
| $('#output').text(''); | |
| translator.show('Hola Mundo! Este es el control de Translator.', 'en', 'es', function(text) { | |
| $('#output').text(text); | |
| }); | |
| }); | |
| $('#btnHide').click(function() { | |
| translator.hide(); | |
| }); | |
| }); |
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
| class Translator extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| sourceLang: 'es', | |
| destLang: 'en', | |
| text: '', | |
| isVisible: false | |
| }; | |
| this.onTranslate = this.onTranslate.bind(this); | |
| }; | |
| show(text, sourceLang, destLang, callback) { | |
| this.setState({ isVisible: true, text: text, sourceLang: sourceLang, destLang: destLang, callback: callback }); | |
| } | |
| hide() { | |
| this.setState({ isVisible: false }); | |
| } | |
| onTranslate() { | |
| this.state.callback('Hello world! This is the Translator control.'); | |
| this.hide(); | |
| } | |
| render() { | |
| return ( | |
| <div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-up') } > | |
| <div className="card"> | |
| <div className="card-header"> | |
| Translator | |
| </div> | |
| <div className="card-block"> | |
| <h4 className="card-title"></h4> | |
| <p className="card-text"> | |
| { this.state.text } | |
| </p> | |
| <a href="#" className="btn btn-primary" onClick={ this.onTranslate }>Translate</a> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }; |
I guess this method
ref={(component) => window.translator = component; }is for legacy versions(<= [email protected]).
For newer versions of react, we can make use of react hooks, forwardRef & useImperativeHandle hook.
For more info check this answer on stackoverflow : https://stackoverflow.com/a/37950970/9131807
your link is no longer exists.. better describe your code here.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I had implemented this method when creating components using Class. now I am making it a functional component. Can anyone update how it will work with the functional component using react hooks?
Class-based components were easy to manage I think. Why react developer making it confusing and complicated using hooks?