I have an issue with getting the ref to the func in React components after I am wrapping it with injectIntl.
basically what I need is to get access to a func in the component by ref
here is what I am doing
class MainContainer extends React.Component {
constructor(props) {
super(props);
}
getSamples(){
return sth
}
render() {
return (<div>this.props.sth</div>)
}
export default injectIntl(MainContainer )
it possible to get the ref to the MainContainer after wrapped it with injectIntl?
The withRef option should be passed.
export default injectIntl(MainContainer,{ withRef: true })
The MainContainer wrapper component instance can be retrieved using
<MainContainer ref={c => { this.container = c; }} />
The wrapped component instance can be retrieved using
this.container.getWrappedInstance();
injectIntl has a forwardRef property which causes it to pass down ref to the wrapped component.
// MyComponent.jsx
// ...
export default injectIntl(MyComponent, {forwardRef: true});
// MyApp.js
import MyComponent from 'MyComponent';
class MyApp {
render() {
this.myComponentRef = React.createRef();
return <MyComponent ref={ref} />;
}
}
reference
Related
App.js
import React from 'react';
import './App.css'
import Tools from './components/class/Tools'
import Loading from './components/inc/Loading'
export default class App extends React.Component {
componentDidMount() {
Tools.showLoading(); // or new Tools();
}
render() {
return (
<div className="App">
<Loading />
</div>
)
}
}
Loading.js:
import React from 'react'
export default class Loading extends React.Component {
constructor(props) {
super(props)
this.state = {
display: 'none'
}
}
render() {
return (
<div className="loading" style={{display: this.state.display}}>
<span></span>
</div>
)
}
}
Tools.js
export default class Tools extends React.Component {
static showLoading(){ // or non-static
Loading.setState ...
}
}
I want change display state from outside of Loading component.
I use Loading in whole my project and I want create function for handle it.
Example for another use:
function xxx(){
Tools.showLoading(); // or new Tools();
}
Or:
<span onClick={Tools.showLoading(); // or new Tools();}></span>
Actually, I want create only one function to manage and handle display of Loading.
In Tools.js
let loadingStateSetter = null
export function setLoadingStateSetter(setter) {
loadingStateSetter = setter
return () => loadingStateSetter = null
}
export function setLoadingState(value) {
if (loadingStateSetter !== null) loadingStateSetter(value)
}
In Loading.js:
import { setLoadingStateSetter } from './Tools.js'
export default class Loading extends React.Component {
constructor(props) {
super(props)
this.state = {
display: 'none'
}
}
render() {
return (
<div className="loading" style={{display: this.state.display}}>
<span></span>
</div>
)
}
componentDidMount() {
this.removeStateSetter = setLoadStateSetter((value) => {
this.setState((state) => ({
...state,
display: value,
})
})
}
componentWillUnmount() {
this.removeStateSetter()
}
}
Usage:
import { setLoadingState } from './Tools.js'
function xxx(){
setLoadingState('some value')
}
While you can easily expose a setState function externally, it acts just like any other function, its not usually a good idea. You should instead consider rewriting your Loading component to use the property object to tell it if its loading and track the loading state higher up the component tree where it is accessible by things that would want to change its status.
I think you can using redux as store manager global state
https://redux.js.org/
another way pass it through props and handle it at parent component
I got an app that is working on react using a class component, i found a code of a feature that i would like to add to my code but it's made using a functional component. The code is here https://codesandbox.io/s/framer-motion-animate-in-view-gqcc8 but the relevant part is this.
import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";
import "./styles.css";
function Box() {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
}, [controls, inView]);
I don't know how to add that controls variable in my class component
class App extends Component {
constructor(props) {
super(props);
this.state = {
curtains: null,
loading: true,
renderNav: false
};
}
Should i add it on my state? i don't understand how to make it works in class component
You can't use hooks inside of a class component. What you can do is to write a little wrapper that exposes the ref and controls in a render prop:
const Controls = ({children}) => {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
}, [controls, inView]);
return children(ref, controls);
};
Then you can use it like this:
class App extends Component {
// ...
render() {
return (
<Controls>
{(ref, controls) => (
<motion.div ref={ref} animate={controls}>
{/* content */}
</motion.div>
)}
</Controls>
);
}
}
Lets say you have
const functionalComponent=()=>{
return <h1>Functional componenet</h1>
}
and you want to change it to class component
use this import at the top:
import React,{Component} from "react";
and change your code to something like this:
Class functionalComponent extends Component{
state={}
render(){
return <h1>functional component</h1>;
}
}
your functional component is now changed to class component.
And to use it in your existing class component , you don't need to change your functional component to class component unless you require local state.
with the introduction of react hooks that's also changed i.e, you don't have to change your functional component to class component if you plan to use hooks.
In your code : useEffect is a hook and you can't use it inside a class component.
I would recommend simply importing the functional component inside your class component and if you have to pass some value , you can pass it as a prop.
And as far as importing your functional component is concerned:
import React,{Component} from "react";
import Box from "./Box.js";
class App extends Component {
constructor(props) {
super(props);
this.state = {
curtains: null,
loading: true,
renderNav: false
};
render(){
return(<Box/>);
}
}
You can also use functional components anywhere like a class component. Btw is also using so no need to worry about the thing that you cannot use state in it.
Use:
<Box props={props}/>
I want to attach a callback to a already created react component, is this possible?
This is my wrapper class, I want to call the callbackToCall from the existing children:
import React from 'react';
class MyComponent extends React.Component {
callbackToCall() {
console.log("callback called.");
}
render() {
const {children} = this.props;
// Here I want to attach the callback to call
// E.g. children.props.callback = callbackToCall;
return (
<div>
MyStuff
{children};
</div>
);
}
}
Child class, which does not have any callback to the container class:
import React from 'react';
class Child extends React.Component {
render() {
return <button onClick={this.props.callback}>Click me</button>
}
}
This is the call of my component, here I don't know how to reference the callback:
<MyComponent>
<Child /* Here I cannot set the callback callback={...callbackToCall}*/ />
</MyComponent>
Given that MyComponent is a wrapper that accepts the only child and supposed to provide callback prop to it, it should be:
class MyComponent extends React.Component {
...
render() {
const child = React.cloneElement(
React.Children.only(this.props.children),
{ callback: this.callbackToCall }
);
return (
<div>
MyStuff
{child};
</div>
);
}
}
Alternatively, MyComponent can be provided with a component instead of an element through a prop, like:
class MyComponent extends React.Component {
...
render() {
return (
<div>
MyStuff
<this.props.component callback={this.callbackToCall}/>
{this.props.children};
</div>
);
}
}
This way MyComponent can additionally accept children for other purposes like <MyComponent component={Child}>...</MyComponent>.
I am having a child component a parent component. I am having a function in child component which returns some jsx what i want to do is use that function to return the same jsx in parent component but iam unable to figure out a way to do that. I am giving my minimal code:
parent component:
class App extends Component {
render() {
return (
<div className="App">
<Player ref={instance=>{this.player = instance}} />
{this.player.func('aaa.com','bbb')}
</div>
);
}
}
export default App;
Child component:
import React, { Component } from "react";
class Player extends Component {
func = (url, label) => {
return (
<button onClick={() => this.func(url)}>
{label}
</button>
)
}
render() {
return <div>1</div>;
}
}
export default Player;
Error: Cannot read property 'func' of undefined
//
Note: i know i can use the jsx in parent component by copy-pasting but iam trying to figure out a way of doing like this. I am having doubt that is it even possible
You can create a Player object and access the function using that object.
new Player().func('aaa.com','bbb')
I don't quite understand what you need exactly but I think that you're looking to pass some jsx element from the Child component to the parent component. What we can do is declare a propType callback on the child component and then implement it on the parent component like so.
import React from 'react';
class Hello extends React.Component {
constructor() {
super();
this.state = {
// this state will keep the element returned by the parent
returnElements: null
}
this.onReturn = this.onReturn.bind(this);
}
// this method will be fired when the Child component returns callback for onSomethingReturned
onReturn(element) {
this.setState({
returnElements: element
})
}
render () {
return (
<div>
<h1>Hello, React!</h1>
<Child onSomethingReturned={this.onReturn} />
{/* I am going to display the state here */}
{this.state.returnElements}
</div>
)
}
}
class Child extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const element = <h3>this is child element</h3>;
// will call the propType callback function with a element I want to return
this.props.onSomethingReturned(element);
}
render() {
return (null);
}
}
export default Hello;
How do I get the DOM node of the rendered div from MyComponent inside Enhance in the following example?
Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
return <ComposedComponent {...this.props} data={this.state.data} />;
}
};
MyComponent.js
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return <div>Waiting...</div>;
return <div>{this.data}</div>;
}
}
export default Enhance(MyComponent); // Enhanced component
Because your HOC is rendering a child component directly, the data returned by findDOMNode in the HOC should be the child's DOM node.
export var Enhance = ComposedComponent => class extends Component {
componentDidMount() {
// Logs the DOM node returned by the wrapped component
console.log( ReactDOM.findDOMNode( this.refs.child ) );
}
render() {
return <ComposedComponent {...this.props} ref="child" />;
}
};
The high order component is the wrapped component itself... enhanced.
Getting the dom node of the wrapped component is equivalent to get the dom node of the hoc.
export var Enhance = ComposedComponent => class extends Component {
componentDidMount() {
// Logs the DOM node returned by the wrapped component
console.log( ReactDOM.findDOMNode( this ) );
}
render() {
return <ComposedComponent {...this.props} />;
}
};
In this way I can also use forwardRef pattern
export default WrappedComponent => {
class EnhancedComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const domNode = ReactDOM.findDOMNode(this);
console.log(domNode);
}
render() {
const { forwardedRef, ...otherProps } = this.props;
return <WrappedComponent ref={forwardedRef} {...otherProps} />;
}
}
const forwardRef = (props, ref) => <EnhancedComponent {...props} forwardedRef={ref} />;
return React.forwardRef(forwardRef);
};
findDOMNode usage appears to be frowned upon (https://github.com/yannickcr/eslint-plugin-react/issues/678#issue-165177220) and ref string values I believe will be depreciated. You can still use ref and wrap your ComposedComponent in a div with a ref, allowing you to access the node.
<div ref={ (elem) => { this.elem = elem; } }>
<ComposedComponent { ...this.props } />
</div>
EDIT
Since you are using React Component classes, you don't need the wrapper. The wrapper is if it's a functional component.