I want to replace a set of element say ".." in place of an element present inside a the already rendered DOM through react component.
Let's say the rendered html by React is as below
<p>This is a demo</p>
<div id='1'>Hello<div id='2'><div id='3'>I want to replace this third div with another set of element</div></div></div>
Please guide me how to make this possible. Thanks in advance!
You can use ReactDOM.render() to replace or update elements.
https ://codepen.io/vliumang/pen/XWjGVev
Or directly change the div by id:
document.getElementById("3").innerHTML = "New text!";
BR
Related
I try to present landing element just before rendering React component at first mount when access my web service.
I refered to this stackoverflow issue
When I add adjacent sibling element of root element as landing element, the element just removed just after React Main component rendered.
So, I don't need to do add/remove className etc.
But, I want to give animation about "fade out" effect to landing page.
I can't. Because it was removed from DOM right after React component rendered.
So, I placed landing element to right before root div element in index.html and it was not removed after React component renderd.
Then, finally I can present fade out effect of landing element.
I'm wondering,
officialy ReactJS remove adjacent sibling element of root element And not remove forwared sibling element??
Is there any explanation page about it in official React web site?
Or
is it just accidental action I found?
// index.html
// this is couldn't give effect
<div id="root"></div>
<div class="landing"></div>
// This is possible to make effect
<div class="landing"></div>
<div id="root"></div>
I have React component that renders some HTML with <div> tag. I want to use that component in <p>, but that occurs error <div> cannot appear as a descendant of <p>.
Can I find that div and replace it with <span> tag?
What I need to find:
<div hidden></div>
You can't really replace an element type like that. Assuming you don't have direct access to this component, you could do some convoluted thing where you wrap the component in a div with a given ref, use that ref to select your element, save it's children, remove it, create a new element, etc, etc.
But you'll probably be much better off just not using a <p> tag in this instance, or figuring out if you have any ability to modify those elements through whatever package youre using.
I'm using ant.design and trying to scroll the body of a <Card>'s body to the bottom. There are 2 common solutions for this.
create an empty <div> at the bottom of the body and call div.scrollIntoView()
access the Body element of the Card and call cardbody.scrollTo(cardbody.scrollHeight)
The first approach works, but for some reason it also scrolls the entire window down as well, not just the immediate parent div.
I'd like to try the second approach (it works if I use my browser to target the Card Body element) but I cannot figure out how to get a reference to that DOM element inside of my React implementation.
To get reference to the DOM element use useRef() hook to create a ref and attach it to the element using the the ref prop. After render the element reference is stored in divRef.current to interact with
const divRef = useRef();
<div ref={divRef}></div>
The goal is to create a W3C web component in React which supports arbitrary DOM nodes as children.
The initial markup in the browser should be like this:
<custom-button>
some <u>styled</u> text here
</custom-button>
I would then:
call customElements.define() to register my React code as the implementation of the custom-button,
inside the implementation create a shadow root inside <custom-button>,
afterwards call ReactDOM.render(<CustomButton ...>, shadowRoot); to populate this shadow root
The DOM structure in the browser is now:
<custom-button>
#shadow-root
<div class="CustomButton">
<!-- x -->
</div>
some <u>styled</u> text here
</custom-button>
But this is not really the desired results; I need the original content of <custom-button> to render inside <div class="CustomButton"> now.
I am aware of the React children prop, but as I understand it, it will only work for children that were also declared inside the React implementation and not with arbitrary DOM nodes that were created on the surrounding web component element.
On the other hand I read that Angular implements a concept they call "transclusion" in which they provide slots which DOM children web component will be mapped into. Is there anything similar in React?
One quick "workaround" that I could think of in React is to:
obtain the ref of the top-level JSX tag,
find the shadow root in ref.parentNode
iterate through all children and re-attach them to ref as new parent
This would only cover the initialization though. If, at runtime, some other script tried to append more children to <custom-button>, or re-order or delete previously inserted children, this would probably fail.
I have just realized that the <slot /> of the web components standard solves the problem.
So, to reflect the content of the <custom-element> inside the React component, the following is completely sufficient:
render() {
return (
<div className="customElement">
...
<slot />
...
</div>
);
}
In our application, html 'input' tag is wrapped and named as lets say 'input-app'
We are using 'input-app' in different places in same html page and I am not able to do cy.get().type() on unique input tag as 'input-app' tag has 'input' which is having same ids.
Do not want to change 'input-app' component definition. What is solution to it?
I am guessing your wrapped input-app should not have the same id on every input,but it seems we are pass that point. Are there any other div elements that are parents of this wrapped input?
cy.get('THE_PARENT_ID').find('input').type('what you need to type')
If you can't change the component can you put your own id on the element that is wrapping it. for instance
<input-app id='YOUR_ID'></input-app>
cy.get('#YOUR_ID').find('input').type('what you need to type')