score:2
theoretically you could achieve this by using refs
. in the parentwindow component you would assign a ref
to the cloned children, that you would then pass as a prop to the navigation.
react works a bit different than other js libraries and it forces you to move your business logic, or event logic to the parent component and pass it down as props. what i would suggest is that you pass in a callback function to the navigation page, that when triggered it calls the contactpage method.
class navigation extends react.component {
render() {
this.props.onalertparent();
return <div>navigate me</div>;
}
}
class parentwindow extends component {
alertchild() {
if (this.childnode && this.childnode.testme) {
this.childnode.testme();
}
}
render() {
<div>
<navigation onalertparent={() => this.alertchild()} />
<p>sub pages</p>
<reactcsstransitiongroup
component="div"
transitionname="page-transition"
transitionentertimeout={0}
transitionleavetimeout={500}
>
{react.cloneelement(this.props.children, {
key: location.pathname,
ref: (node) => { this.childnode = node; }
})}
</reactcsstransitiongroup>
</div>
}
}
notice how the navigation
component receives a callback function via the props, the navigation element doesn't need to know anything about its siblings, it's communicating to them using the parent.
the react way is to communicate between components using props by passing either data or callbacks. there is always a better way to communicate than calling element methods. even the approach i suggested is flawed since it's still calling a method from an element.
Source: stackoverflow.com
Related Query
- How can a React Component trigger the function of a sibling React Component
- How can I pass the children of a function component to another function component in a react class?
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- React Hooks Error: Hooks can only be called inside the body of a function component
- How to update the state of a sibling component from another sibling or imported component in REACT
- How can I use an IIFE in the return function of a react component?
- How to use React.FC<props> type when the children can either be a React node or a function
- How can I customize the style of a React component shared between lazy-loaded pages?
- How can you trigger a rerender of a React js component every minute?
- How to call a component function on other component, but from the other component ? React
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
- React Hooks can only be called inside the body of a function component
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- React 17.0.1: Invalid hook call. Hooks can only be called inside of the body of a function component
- How can I use react useContext , to show data from context, in the same component
- React testing - How can I mock or inject data in the store to be provided as props to component
- Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example
- How can I cancel the next 'then' in a Promise when a React component is unmounted/reused?
- How i can create the function for the countdown in React native?
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- React Hooks Mobx: invalid hook call. Hooks can only be called inside of the body of a function component
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How can I hide a component in React depending on the screen size?
- How can we write a click handler for a Stateless Function Component in React JS
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- how to pass the current item to the function so that i can remove it from array in react component?
- How do I test a React component that calls a function on its parent, which changes props on the component?
- How react functional component can use object variable which declared behind the usage? (include example)
- How can I update component in React after adding a new item into the database, using react hooks?
- How can I access another function inside the react Context.Provider value?
More Query from same tag
- multiply 2 value from each array of objects then add the multiplied numbers to get a total number in Reactjs/Javascript
- Deleting an array element of a react state
- TypeError: _firebase_firebase__WEBPACK_IMPORTED_MODULE_8__.default.auth is not a function
- Appending a child component in to HTML using react
- ReactJS router v4 Mobx - Router wont re-render components?
- Browser back button using React
- Kendo-React-PDF PDF Export not displaying image from S3 bucket: “No 'Access-Control-Allow-Origin' header is present on the requested resource”
- How to customise single row on the basis of sorting in react-bootstrap-table
- How to replace array of one object key with another array of object key in react
- React useEffect and useState problems
- React Hooks - Prevent re-render when using prevState
- React HOC returns before async function can run
- fontFamily "$text-font-family" is not a system font and has not been loaded through Font.loadAsync
- CSS file is not working in react component
- is this the right way to call a fuction and `<Link to ='/orderCP/orderCompletedCP' /> ` to change route
- Adding an event handler to a pure React component?
- Random classes getting displayed when we use styled components?
- multiple images in CardMedia ReactJs
- Building a product-filter in NodeJS/MongoDB: only works when selecting all filters
- React avoid all child rerendering
- TypeError: Cannot read property 'url' of undefined react
- how to properly update state within react
- search using id in react-table?
- Why is map not working with json from api, while locally created json works fine? React
- Attempting to access link to state within another component results in a typerror where state in undefined
- How can I run Azure TTS on iOS
- Why does React Hook Form think field not filled in with Chakra UI?
- Why I can't access url localhost:9000/dummyTable?
- How to change CSS of columns - ReactTable
- React table not displaying data