React: trying to use jquery after componentDidMount - javascript

I have a react Class component using the componentDidMount method. I'm trying to append things to a div after the entire component is rendered.
For each react component rendered it includes a div with a unique id such as chartcarsousel1 or chartcarousel2 or charttopmovies. The unique id in each rendered component comes from adding the string 'chart' with a variable passed to the component. For example if the variable name is key, the div's id will be: 'chart'+key.
I'm trying to append some things to that div in my react component after it is rendered but this does not work:
componentDidMount(){
$('div#chart'+key).html("test");
}

Mixing jQuery with React could be a really bad idea if you don't understand React properly. Use some references and arrays to render a list of children. I suggest to take an only React's approach first. If you dive deeper on the problem you're facing, please, share more parts of your code.

Related

How to append or inject React Class Component in a Modal outside React Tree

We have a project build in PHP MVC Framework and we use jQuery as a global JS framework in handling UI activity etc, however, we are now using react js. Therefore, my question is how can I inject or append React Functional/Class-based Component to a current jquery built-in modal() component? I try to run the following code but the modal content shows [object Object]...
onClick handler:
this.testHandler = () => {
const x = `<div>${<Component />}</div>`
$('#test-123').modal()
$('#test-123 #modal-body').append(x)
}
This Component Returns a Table with a list of data coming from api endpoint, the table is working and displaying properly when i render it. But my main goal is to use it outside and inject it as a modal content.
Thanks in advance!
The way to render a react component outside of react is to call ReactDOM.render, passing in the react element you want to render and the dom element you want to put it in. For sites that are fully done in react, you would typically call this exactly once. But if necessary, you can do it on the fly or multiple times, targetting specific pieces of your dom.
const element = $('#test-123 #modal-body').get(0);
ReactDom.render(<div><Component /></div>, element);
Be aware that React assumes it is the only piece of code modifying the part of the dom tree that you tell it to operate in. So you should avoid making any further changes to the #modal-body element using jquery.

Is there a way to compile react components to html before build time?

I have a function that takes dom elements and operate on them. It is called pageTransition, and it takes two div elements, and performs a transition animation from the one to the other.
function pageTransition(div1, div2){//do the transition}
for example i can call this function like,
pageTransition (document.body.querySelector("#div1"), document.body.querySelector("#div2"))
That is simple, but let us say I want to pass React class components as my div elements. And that isn't possible because react components are class's not html elements. One quick reminder, this react components in the end will be compiled to div elements with some content during build time. I know I could get around this by doing this
...//the react class
render(
return (
<div id="div1">...</div>//this will allow me to call the above function with the same parameters
)
).
But I was just wondering if there was a magic way to compile this react classes before build time, so rather than giving the id's to the returned div's I was wondering if I could do something like this pageTransition(compile(reactClass), compile(reactClass));
The solution will depend on your intended purpose for pageTransition.
However, there are three potential options you may want to look into:
Statically render a React component into html markup or a string: https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
Render two div elements in html and use a React portal to manage what is being rendered in the those divs. This could potentially replace what you are doing in pageTransition. https://reactjs.org/docs/portals.html
Use a ref to access the DOM element that is built from the React component: https://reactjs.org/docs/refs-and-the-dom.html
If you explain what pageTransition does it might help me find a solution for you.

Access dom element with reactjs

I have an AntD component, and i don't have access to the html markup to use useRef to apply a style to next class , depending by a condition:
span.ant-descriptions-item-content
This is why i used:
if(my condition) {
document.querySelector('span.ant-descriptions-item-content').style.background="red"
}
demo: https://codesandbox.io/s/basic-ant-design-demo-fdwxd?file=/index.js
It is ok to use native ways of accessing dom element like document.querySelector, or exists another method to do this in my case?
It is generally not recommended to mix different tools that handle changing how the web page is rendering. This can cause unpredictable behavior and components not updating correctly. If you want to change the appearance of a component using React you should be rendering that component within React.

Dynamic tag name in jsx and React doesn't pass props

Following on Dynamic tag name in jsx and React
I tried both suggested answer but both of them seems to not pass any props!!
(Here is a an example of this issue)[https://codesandbox.io/s/angry-torvalds-x7hcv?fontsize=14]
What am i doing wrong?
Here is another example which is not minimal like the one above, using React.createElement, which also doesn't work as it should and it seems its not passing any props
outputElement = React.createElement(
`${this.props.UI_Element.type}`,
{
...globalRequiredProperties,
...this.props.UI_Element.config
},
...UIChildren
)
In short my final goal is creating an imported component, dynamically only by having its type (or name you might say).
Update 01:
After constatnly looking i found an alternative way, this uses an array in which you map an string to the actuall component and then create a tag which uses the map to call the component
Here is an example
This seems to be working as it should but i still would like to avoid creating the map manually, meaning i still wish to only create the component only using string!, is there a way to do this?
I was looking for a way to not only dynamicly import a component but also create it dynamicly, but this could not be achieve how a dynamic tag was created, after looking for a while i came across a library which exatcly does this!!
The Library is called react-loadable
Here is an example
As you can see both the import, the component tag and everything else is created dynamicly just as i want it, hope this helps everyone else too.

Generating id's for React components for Selenium tests

I'd like to generate id's for almost every element in my website, to have an easier time handling elements for Selenium tests. Is this a good approach? My application changes quite a bit.
I can't seem to add the id HTML attribute to the React component, because React interprets it as props e.g.
<NewEl id='test'/>
... and NewEl gets id props instead of attribute. Sometimes I can't access the React component because I use third party components.
How should I change that id attribute? Is my approach a good solution?

Categories

Resources