All geek questions in one place

ReactJS Component Features

There are still silly questions about ReactJS =) Is there a way to add public functions to React components? I am trying to do 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 what I'm doing wrong?

+5
source share
3 answers

You should not use the component method outside the component itself (or passing it as a callback to a child component). You should consider them as private methods.

However, you can use a React function called statics to provide functions that are accessible from outside the component. However, they should be considered as static functions of the class, and as a result, they do not gain access to the internal components of your component (for example, this.props or this.state ).

Here is an example of some statics setting for a component:

 var Component = React.createClass({ statics: { // these functions are available outside the component renderToBody: function() { React.renderComponent( <Component />, document.body ); } }, // cannot access this function outside the component getHelloWorld: function() { return 'Hello World!'; }, render: function() { return ( <div>{this.getHelloWorld()}</div> ); } });

So, if we call React.renderComponent(Component({}), elem) , then the component will display on elem , but due to the static you can call Component.renderToBody() and it will display the component directly in the <body> element .

IE: Functions defined inside the statics component are available directly as static functions. However, you must remember that they are static in the sense that they are not part of the object instance, they are just functions that you can call in the class.

The whole idea of ​​response is that the components are as self-sufficient as possible. You will never have to access the component instance function directly from outside the component, because instead you just change the details for the component and re-visualize it so that inside it can change.

Here is an example of this:

 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> ); } });

While you could create a show() method instead (so you can do component.show(true) or component.show(false) to show / hide), you will pass it as a property for the same result instead .

Calling React.renderComponent(Component({message: 'foo', show: true}), elem) will make the component visible, re-rendering with show: false will hide it, etc. The same result, but with the help of props, which is a reaction.

+12
source

Simple answer: LoginForm ({}) does not return a component. It returns a handle object that React will use to later create the component later. There are two ways to access the actual component:

  • like this in component methods
  • giving the component a ref=name prop; the actual component will be available in the creator, since this.refs.name at the time the creator is created, componentDidMount .

http://facebook.imtqy.com/react/docs/more-about-refs.html

0
source

Perhaps using the result of the render function:

 var login_form = React.renderComponent(LoginForm({}), document.body); login_form.MyFunc(); login_form.setProps({loaded: true});

In this case, you can use setProps for the root component (but only for the root component).

0
source

Source: https://habr.com/ru/post/1204040/

More articles:


All Articles