Skip to content

Instantly share code, notes, and snippets.

@primaryobjects primaryobjects/index.html
Last active Aug 21, 2019

Embed
What would you like to do?
Calling a React component's methods from outside of React. Demo https://plnkr.co/edit/E6lPrL331KGxoikGinFm?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.1.1" 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="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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>
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();
});
});
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>
);
}
};
@yzorg

This comment has been minimized.

Copy link

commented Jan 25, 2018

Consider using ref={(component) => window.translator = component; } instead of var translator = ReactDOM.render(...); According to React 16 docs the later is incompatible with async rendering and will be deprecated in the future.

@baffleinc

This comment has been minimized.

Copy link

commented Jul 3, 2018

This is awesome. Thank you!

@tonthanhhung

This comment has been minimized.

Copy link

commented Jul 4, 2018

hi @yzorg, @baffleinc could you help to explain how to use the ref={(component) => window.translator = component; } instead of var translator = ReactDOM.render(...); ? where should ref be placed ?

@bramchi

This comment has been minimized.

Copy link

commented Jul 6, 2018

@tonthanhhung I was wondering the same thing. Here is a clarification for that new ref approach: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/

@littlefroginnovations

This comment has been minimized.

Copy link

commented Feb 8, 2019

Does this not work on the new version of react? I can not get this example working at all. Just returns "Cannot read property 'show' of undefined". Tried using the ref method as well as old method.

@fannyhaz

This comment has been minimized.

Copy link

commented Feb 25, 2019

Thank you very much, it works! 👍

@alimovz

This comment has been minimized.

Copy link

commented Aug 21, 2019

@tonthanhhung I was wondering the same thing. Here is a clarification for that new ref approach: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/

This is the proper way to do it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.