score:0
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')
}
score:0
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.
score:0
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
Source: stackoverflow.com
Related Query
- Unable to setState on ReactJS component from outside React
- How do I call setState from another Component in ReactJs
- Render a component from outside ReactJS
- Reactjs - Setting State from props using setState in child component
- How to prevent outside CSS from adding and overriding ReactJS component styles
- Correct approach for updating an already rendered ReactJS component from outside that component
- ReactJS setState changes not propagating from parent to child component
- How to setState in child component when child function called from parent component in ReactJS
- How to call method inside main Component from outside in Reactjs
- ReactJS - Call a component function from outside for multiple instances
- Reactjs: setState from outside of component
- ReactJS need to call function from outside class component
- Call a React component method from outside
- Call a React component method from outside
- How to access the "key" property from a reactjs component
- Update component state from outside React (on server response)
- ReactJS - Call One Component Method From Another Component
- How to submit form from a button outside that component in React?
- Import ReactJS component from another file?
- Set React component state from outside of component
- How can I call methods on Reactjs components in the browser console or from an outside script?
- Reactjs - passing state value from one component to another
- ReactJS modify parent state from child component
- Can we pass setState as props from one component to other and change parent state from child component in React?
- Reactjs how to change the state of a component from a different component
- access the theme from outside material-ui component
- ReactJS import component outside src/ directory
- Dynamically rendering component from string: ReactJS
- Reactjs - How to pass values from child component to grand-parent component?
- Call child component method from parent component in reactjs
More Query from same tag
- How does Redux's Connect function figure out where my state is?
- How do I pass one string of an array each time a component is rendered?
- ReactJS - valid function not working when called in componentDidMount() and componentDidUpdate()
- React Conditional rendering Order
- make whole row clickable
- Render Material UI component down to a string
- How to avoid loading for nonexistent static pages?
- It is possible catch global error on react
- ReactJs cannot acess nested route
- failed to concat nested array of object in setState of react
- Passing a URL param to a component
- Passing React button text value around
- getDefaultProps method inside of class, versus class.DefaultProps
- How to implement Counter on each item in the FlatList
- How to fully load data using axios before render
- ReactJS - Using setState with firebase listen
- Filtering (searching) for two values (search criteria) in Javascript
- how to create load more bottom in nextjs for get rest of data? (Next.js Pagination)
- How to get the values from a Multiple Search Selection dropdown box in react-semantic-ui?
- Why doesn't this flow type definition work?
- How to make translation runtime
- Receiving 'Cannot GET /' error on deployed Heroku page
- react dc.js import not working
- How to get the new child element reactjs
- How to set height and width of background image inline style in react
- Typescript React - Check if route path exists in array
- cannot start React project with `npm start`: events.js:292 throw er; // Unhandled 'error' event
- Access elements inside element with ref
- Google maps marker delete function not invoked in ReactJS
- React hooks useState submit on second time from child component