I have custom component in my reactjs application:
class Word extends React.Component {
click() {
// can i access app instance here?
}
}
Your question is not precise but I am assuming you have top level App component which has child components and you are asking if child component can access App component.
If thats the case then just pass reference to it as a prop:
class App extends React.Component {
render() {
<Word parent={this} />
}
}
class Word extends React.Component {
click() {
console.log(props.parent);
}
}
However I believe this to be anti-pattern.
Related
Is there any side effect I do not see by doing this ?
class App extends React.Component {
hello() {
console.log("hello")
}
render() {
return <Layout app={this}>
}
}
So later on I can refer to this.props.app.hello (and others) from Layout ?
This is not safe.
React will not know how to watch for changes, so you may miss re-renders. React uses === to check for state changes, and App will always be === to App, even when state or properties change.
Take this example:
class App extends React.Component {
constructor(props) {
super(props);
this.setState({text: 'default value'});
}
hello() {
this.setState({...this.state, text: 'new value'});
}
render() {
return (
<div onClick={this.hello}>
<Layout app={this}>
</div>
);
}
}
class Layout extends React.Component {
render() {
return <div>{this.app.state.text}</div>
}
}
When you click on the parent div, this.hello will be called, but the child component will not detect the state update, and may not re-render as expected. If it does re-render, it will be because the parent did. Relying on this will cause future bugs.
A safer pattern is to pass only what is needed into props:
class App extends React.Component {
//...
render() {
return (
<div onClick={this.hello}>
<Layout text={this.state.text}>
</div>
);
}
}
class Layout extends React.Component {
render() {
return <div>{this.props.text}</div>
}
}
This will update as expected.
Answer
There's nothing wrong in passing functions as props, as I can see in your example, the only thing you have to do is make sure your function is bound to the current component like the following example
Reference
React: Passing Functions to Components
Has anyone tried using the React Component library? https://formidable.com/open-source/component-playground/
Is there a way to only show just a segment of the codeText in the live code editor (e.g without the class and render method) but still setting the noRender to false?
Thanks!
You can create your component and then extend it with another component with the methods and properties you want to show.
For example;
export default class PrivateComponent extends React.Component {
constructor(props) {
super(props);
// constructor logic here
}
someHiddenMethod() {
// ...
}
render() {
return(
<div>
<h1>Hidden Render</h1>
</div>
)
}
}
import PrivateComponent from './PrivateComponent.jsx';
export default class PublicComponent extends PrivateComponent {
somePublicMethod() {
// ...
}
}
My React app has a base div like so:
<body>
<div id="root">
....
</div>
</body>
In my Welcome container, I would like to add a class to the div w id="root and then on Welcome container unmount, remove the class.
class Welcome extends React.Component {
componentDidMount() {
console.log('componentDidMount');
console.log($('#root'));
}
....
With jQuery I could do something like
$('#root').addClass('myClass')
....
$('#root').removeClass('myClass')
What is the equivalent in React for adding and removing a class on a div after finding it by its ID?
This makes no sense. You shouldn't be adding classes to root from React components. The root div should just exist to inject React in to using ReactDOM.
Instead of modifying the html root, create a react class called App or something and render a <div className="app" /> that wraps all of your components. You can then use React state or props to modify the className.
class App extends React.Component {
constructor() {
super();
this.state = {
appClass: 'myClass'
};
}
componentDidMount() {
this.setState({ appClass: 'newClass' });
}
render() {
return (
<div className={this.state.appClass}>
// Render children here
</div>
);
}
}
If you want to modify the appClass from a child component such as Welcome which is further down in your application then you will need to use a state management like Redux or Flux to modify the className from a child component otherwise it will get messy fast.
EDIT: removed semicolon from this.state object
i have a React component
lets say
class Component extends React.Component {
constructor(props) {
super(props);
}
a() {
console.log(this.props.A);
}
render () {
return (
<div>
...
</div>
);
}
What i want to do is expose function a() globally so i can access it in other parts of my application(not React) like this window.a()
I used to do that like this window.a= a; but im not sue how to do it when im accessing components props
EDIT
Since discussion is growing i should probably clarify what im trying to do
Im using redux togehther with react and really i want to fire redux action from GWT
so my real world code looks smth like this
class Component extends React.Component {
constructor(props) {
super(props);
window.fireTemplatesChanged = this.fireReduxTemplatesChanged.bind(this);
}
fireReduxTemplatesChanged() {
this.props.dispatch(fechDataFromServer());
}
componentWillMount () {
this.props.dispatch(fechDataFromServer());
}
render () {
return (
...create hierarchy of components connected to redux store
);
}
}
export default connect(state => ({
}))(Component);`
since this is only a part of app user is able to modify objects shown in UI of this react sreen from another places opened on top of this page
after modification is done im firing event causing redux to reload data and rerender UI accordinggly
public static native void fireReactCategoryChangedEvent() /*-{
$wnd.fireTemplatesChanged();
}-*/;
I have a file named separatefile.jsx, in this file parent component name is Content and child component name is Child.
separatefile.jsx
import React from 'react';
import Parent from './learning.jsx';
class Content extends React.Component {
constructor() {
super();
this.state = {
finding : 'i am finding'
}
}
render() {
return (
<div>
<Child childprop={this.state.finding}/>
<Parent/>
</div>
);
}
}
class Child extends React.Component {
render() {
return (
<div>
<h2>{this.props.childprop}</h2>
<h1>child class property</h1>
</div>
);
}
}
export default Content;
This is another file named as learning.jsx , this file has Parent component named as Parent and Child component named as a Children.
My questions is that i need to access Parent component property(parent component for learning.jsx) from Child component(child component for separatefile.jsx file)...
learning.jsx
import React from 'react';
class Parent extends React.Component {
constructor() {
super();
this.state = {
searching : 'i will find the solution'
}
}
render() {
return (
<div>
<Children childrenprop={this.state.searching}/>
</div>
);
}
}
class Children extends React.Component {
render() {
return (
<div>
<h2>{this.props.childrenprop}</h2>
</div>
);
}
}
export default Parent;
If I understood you correctly, you want to use Parent's state in your Children component?
You can pass it down the component tree as props, e.g.:
class Content extends React.Component {
constructor() {
super();
this.state = {
finding : 'i am finding'
}
}
render() {
return (
<div>
<Child childprop={this.state.finding}/>
<Parent finding={this.state.finding} />
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
searching : 'i will find the solution'
}
}
render() {
return (
<div>
<Children finding={this.props.finding} childrenprop={this.state.searching}/>
</div>
);
}
}
class Children extends React.Component {
render() {
return (
<div>
<h2>{this.props.childrenprop}</h2>
<div>{this.props.finding}</div>
</div>
);
}
}
It's probably not a direct answer but if you are starting a new app I would recommend you to use Redux with react-redux.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
It's very small library so it's easy to understand how everything works. It might be a good solution to your problem.
Todo app example
You can also check out awesome egghead.io free tutorial - Getting Started with Redux
Here is the answer about the redux benefits by its author Dan Abramov
The React documentation provides an answer.
For communication between two components that don't have a
parent-child relationship, you can set up your own global event
system. Subscribe to events in componentDidMount(), unsubscribe in
componentWillUnmount(), and call setState() when you receive an event.
Flux pattern is one of the possible ways to arrange this.