Menu
Still have stupid questions about ReactJS =) Is there any way to add public functions to React components? 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?
668
A React functional component is a simple JavaScript function that accepts props and returns a React element. After the introduction of React Hooks, writing functional components has become the standard way of writing React components in modern applications.
Usually, a component provides a particular function or group of related functions. In programming design, a system is divided into components that in turn are made up of modules. Component test means testing all related modules that form a component as a group to make sure they work together.
To answer, it is as simple as creating a function returning an HTML-like syntax. import React from 'react'; function Counter({n}) { return ( <div>{n}</div> ); } export default Counter; Now let's see what happened in the code above. Counter is a function that transforms a number into HTML.
You're not supposed to use a component's method outside of the component itself (or by passing it as a callback to a child component). 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 component. 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 component (such as this.props or this.state).
Here's an example of some statics setup 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 would render to elem but because of the static you could call Component.renderToBody() and it would render the component directly to the <body> element.
IE: Functions defined inside the component'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 component object, they are just functions you can call on the class.
The whole idea with react is that components are as self-contained as possible. You should never need to access a component instance function directly from outside a component as what you should do instead is just change the props for the component 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 component instead (so that you could do component.show(true) or component.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 component visible, re-rendering with show: false will hide it, etc. Same result, but with props, which is the react way.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
