Skip to content

Instantly share code, notes, and snippets.

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! 👍

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.