I need to create an HTML element and provide it to some third-party component.
const testElement = <div ref='myself' className='test-label'>Hello (React) HTML element!</div>
thirdParty.addElement(testElement)
In the above I create the element with React, but passing it on as said raises an error, obviously because it's a React element and not a native DOM element.
Is there a way to convert testElement to a DOM element?
That said, I'm looking for a solution that will retain event handlers etc' associated with the component, so simply converting to HTML (ReactDOMServer.renderToString(testElement)) doesn't cut it.
-
Edit regarding duplicate:
The other one discusses about the HTML string. I need the object along with its event handlers etc'.
Try (ReactDOM.render(textElement, thirdParty))
https://facebook.github.io/react/docs/react-dom.html#render
Related
Is there anyway I can use something like this:
<span onClick={(e) => console.log(e)}>Testing</span>
Inside react-contenteditable to handle the click on Testing keyword?
When I use the html prop, it would only take an html string, something like <span onclick="something()"></span> I suppose, but is there a way to do it in react instead?
And if I use <span onclick="something()"> where should I define this function something()? I suppose at this point I won't have access to the functions defined in react, right? So how should I do this?
onClick is a React property so react-contenteditable wouldn't know what to do with it - since html expects plain html
A hacky way to achieve what you want - or pretty close to it - is:
Create an onClickContentEditable function and is it as onClick for ContentEditable
Add an innerRef to ContentEditable
in onClickContentEditable, then the clicked element is ContentEditable do nothing - since we want to interact only with the children of ContentEditable
Based on DOM attributes of the clicked element (tagName, className ...etc) fun with it! :)
In onClickContentEditable you can check the DOM attributes of the clicked element and take action accordingly.
You could create a class to mark the element you want to click.
You can test this implementation here - the sandbox is forked from the complex react-contenteditable example. I logged the interactions in the console.
Hope it helps!
You cannot assign any React DOM events on children of the react-contenteditable component, because internally it converts all the children to plain HTML string via dangerouslySetInnerHTML React prop:
https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.tsx#L53
All React bindings will be lost once the node is rendered
This is generated element by the plugin
<span class="leaflet-draw-draw-polyline">...</span>
I want to click on an element from some other part of the code.
How can I trigger click on this element without using ref on it?
Since the element seems to be completely out of a React component's scope, you could try either of the following:
create a React component and use refs
simply use document.getElementsByClassName() and .click()
How do I access an element from within the mounted function in a VueJS instance.
When I try the following, it tells me that the element is undefined. When I see the DOM it is there. Could this be a case where the element is not rendered before I try to reference it?
document.getElementsByName('transferDate_submit')[0].addEventListener("change",function(){});
You get a HTMLElement instance when you call your Vue.js instance with $el. Check the API.
Example
let allLinks = this.$el.querySelectorAll('a')
Alternatively, you could use a ref. This is a like a programmatic ID. Also check the API.
Example
<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
You can just use v-on:change or #change to bind your event listener so that you can avoid manipulating DOM element. Besides, Vue.js is to make you not to DOM as far as possible
Using and html element's addEventListener has several advantages over using inline events, like onclick.
However, to store the element including its inline event is straight forward, for example, by embedding it in a parent element and storing the parent's innerHTML.
Is it possible to do something similar when using event listeners?
Edit:
I realized that my question is not sufficiently explained. So here some additions.
By "store" I mean a way to get the information holding the element and the event listener.
The analogue with inline events is easy: just embed in a parent element and save the parent's innerHTML (string) somewhere, for example in a database, and recreate the element later by loading the string and applying it to the innerHTML of some element.
But how would one do the analogue with elements when using event listeners? One cannot just use the innerHTML since then the events are not stored.
I hope this clarifies my question a bit.
Edit 2
With the help of comments I have made some unsuccessful attempts.
It is possible to get store the information of an element using createDocumentFragment() or element.cloneNode(true).
However, the first method does not work for external storage since, if I understood correctly, will contain only a pointer. Here is an example:
https://jsfiddle.net/hcpfv5Lu/
The second method does not work either. I am not fully sure why, but if I JSON.stringify the clone it "vanishes". Here is an example:
https://jsfiddle.net/3af001tq/
You could use a document fragment to store the DOM node in a JavaScript variable which can then be appended to a DOM element when required.
https://developer.mozilla.org/en/docs/Web/API/Document/createDocumentFragment
Yes.
You can use something like.
<ul>
<li id="list">Some data</li>
<li>Dumy</li>
</ul>
then in your javascript file,
document.getElementById("list").addEventListener("click", function(){
var htmlMarkUp = this.parentNode.innerHTML;
});
This would store the html content of ul in var htmlMarkUp.
I am still experimenting how far I can go with building a widget in Polymer and I am stuck in one place. I want to create an element with children that are also polymer elements. Something like:
<my-view name="Hello">
<my-child-view attribute="test">Test</my-child-view>
<my-child-view attribute="test1">Test2</my-child-view>
<my-child-view attribute="test2">Test3</my-child-view>
<my-child-view attribute="test3"></my-child-view>
<my-other-child-view var="test5"></my-other-child-view>
</my-view>
I want to get children that are the tag name "my-child-view". Using this.children takes all the children. Is there a native polymer functionality like this.getChildrenWithQuery('my-child-view')? Or should I just loop through children and check the ones with tag name myself?
this.querySelectorAll('my-child-view')
Native JS DOM! Yes, querySelectorAll() works on elements as well as the document.