score:0
Accepted answer
a clean way is to fork third-party component and make it expose a ref.
one workaround is to extend third-party component:
class firstparty extends thirdparty {
inputref = react.createref();
render() {
const inputreactel = super.render();
return react.cloneelement(inputreactel, { ref: this.inputref });
}
}
another workaround is to wrap it:
class firstparty extends component {
componentdidmount() {
this.inputdomel = reactdom.finddomnode(this);
}
render() {
return <thirdparty {...this.props}/>;
}
}
in case react 15 is in use, createref
refs can be changed to legacy refs.
score:1
you can get a ref to your own div
and write some code to find the node you need among its children.
since you have an id
you can just window.document.getelementbyid(id)
to access that node.
Source: stackoverflow.com
Related Query
- How to get the width of an element using ref in react
- How to get the element from the ref in REACT
- How to get 'ref' of wrapped element in react < 16?
- How to get correct width of element with ref in react componentDidUpdate
- How to get the width of a react element
- How to get "key" prop from React element (on change)?
- How to get "key" prop from React element (on change)?
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- Pass React Ref from parent to child in order to get DOM element
- How to get the react component instance corresponding to event.target element in a click handler?
- How to get width of element using React ref?
- How to get ref from a React 16 portal?
- How to get the element with the testid using react testing library?
- How to use react ref to get value from html select element?
- How to get size of an element in an react app that is totally based on functional components?
- How to get Font Awesome Icon in react app for a pseudo element in css
- How to get position of element React | Redux (.getBoundingClientRect() + .getWrappedInstance())
- How to get the ref of the first element that's rendered with .map?
- how to test a react hook that can have a ref of an html element passed to it
- How can I get a width of html element in React JS?
- Action on blur except when specific element clicked with react OR how to get clicked element onBlur
- How to get element margin in React JS
- How to get the value of the span element with testid using react testing library?
- React how to get wrapped component's height in HOC?
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- How to add event listener to the div element accessed with ref using react and typescript?
- How to get DOM element within React component?
- How to get an element height in react js with out using any pulgin
- How can I get the coordinates of a given element in react tsx
- Why I can't get element by ref in React
More Query from same tag
- react-router-dom only works on reload, is there any solution or another way to redirect to other pages?
- Data fetched from an API is not rendering (React)
- React is retrieving firebase data thrice
- Passing Props to New Component - ReactJS
- In react, how to pass a dynamic link in sms href?
- Semantic's Popup does not show up when passing a custom component as trigger
- Gatsby: "warn There are multiple modules with names that only differ in casing. This can lead to unexpected behavior..."
- Change language to JSX in Visual Studio Code
- TypeScript React HOC return type compatible with decorator
- Showing passport.js messages with flash
- Bootstrap: Invisible checkbox with normal working inside button
- firestore getting doc data issue
- How can I align my text and put the button on the extrem right of my gray bar?
- Material-UI injectFirst doesn't work with storybook
- Nesting variables in a React JSX string
- Catch all with Next routes
- Comparing and updating the fields in firebase database
- Changing the value of a checkbox by inheriting a value in React.js
- react-redux 4.0: testing mapStateToProps and mapDispatchToProps?
- Trying to use custom hooks with axios
- How to add an image to my src when selected
- Webpack and babel-loader not resolving `ts` and `tsx` modules
- Use tag <mark> between string
- How to write unit test for ipcRenderer.on and ipcRenderer.send in Jest?
- How to handle conditional thunk calls depending on state
- How to avoid duplicate image urls on click in Redux
- Instantiate a new Howler Object in Action Creators and dispatch actions on events
- How do I simulate text getting entered and enter key pressed in Jest
- Refresh recoil atom with async fetch, after it has been updated locally?
- issue on adding selectize.js dropdown in cell in ag-Grid