Still have stupid questions about ReactJS =) Is there any way to add public functions to React ponents? I'm trying to make something like this:
var LoginForm = React.createClass({
getInitialState: function() {
},
render: function() {
},
MyFunc: function () {
}
})
...
var login_form = LoginForm({});
React.renderComponent(login_form, document.body);
...
login_form.MyFunc (); <-- error
Can you explain please what I'm doing wrong?
Still have stupid questions about ReactJS =) Is there any way to add public functions to React ponents? I'm trying to make something like this:
var LoginForm = React.createClass({
getInitialState: function() {
},
render: function() {
},
MyFunc: function () {
}
})
...
var login_form = LoginForm({});
React.renderComponent(login_form, document.body);
...
login_form.MyFunc (); <-- error
Can you explain please what I'm doing wrong?
Share Improve this question asked Oct 5, 2014 at 10:37 KaronatoRKaronatoR 2,6534 gold badges26 silver badges31 bronze badges3 Answers
Reset to default 13You're not supposed to use a ponent's method outside of the ponent itself (or by passing it as a callback to a child ponent). You should treat these as private methods.
However, you can use a feature of React called statics to provide functions that are available from outside the ponent. However these should be treated like static functions of a class, and as a result they don't get access to the internals of an instance of your ponent (such as this.props or this.state).
Here's an example of some statics setup for a ponent:
var Component = React.createClass({
statics: {
// these functions are available outside the ponent
renderToBody: function() {
React.renderComponent(
<Component />,
document.body
);
}
},
// cannot access this function outside the ponent
getHelloWorld: function() {
return 'Hello World!';
},
render: function() {
return (
<div>{this.getHelloWorld()}</div>
);
}
});
So if we call React.renderComponent(Component({}), elem) then the ponent would render to elem but because of the static you could call Component.renderToBody() and it would render the ponent directly to the <body> element.
IE: Functions defined inside the ponent's statics object are available directly as static functions. However you must remember that they are static in that they are not part of an instantiated ponent object, they are just functions you can call on the class.
The whole idea with react is that ponents are as self-contained as possible. You should never need to access a ponent instance function directly from outside a ponent as what you should do instead is just change the props for the ponent and re-render it so that it, internally, can change.
Here's an example of that:
var Component = React.createClass({
propTypes: {
// always get in the habbit of using propTypes!
message: React.PropTypes.string.isRequired,
show: React.PropTypes.bool
},
render: function() {
return (
<div style={{display: this.props.show ? 'block' : 'none'}}>
{this.props.message}
</div>
);
}
});
Whereas you might have created a method show() on the ponent instead (so that you could do ponent.show(true) or ponent.show(false) to show/hide - you instead pass it as a property for the same result.
Calling React.renderComponent(Component({message: 'foo', show: true}), elem) will render the ponent visible, re-rendering with show: false will hide it, etc. Same result, but with props, which is the react way.
The simple answer is that LoginForm({}) does not return the ponent. It returns a descriptor object that will be used by React to instantiate the ponent later. There are two ways you can access the actual ponent:
- as
thisin the ponent methods - by giving the ponent a
ref=nameprop; the actual ponent will be available in the creator, as this.refs.name by the time the creator'sponentDidMountexecutes.
http://facebook.github.io/react/docs/more-about-refs.html
It is possible by using the result of the rendering function:
var login_form = React.renderComponent(LoginForm({}), document.body);
login_form.MyFunc();
login_form.setProps({loaded: true});
The use case for this is that you can call setProps on the root ponent (but only on the root).