I use some DOM string manipulation libraries to generate HTML string and then inject them to some React components using dangerouslySetInnerHTML in my project, does react will add them to the virtual DOM? Can I still get the performance benefits from React in this way?
Yes and no. They're represented as string props, and the current html string as a whole is compared to the previous string using the equality operator.
There's no checking within the strings, or parsing the html into virtual dom. You can parse the html yourself, or modify the code generating it to output virtual dom instead.
Related
I have a Reagent (React wrapper) applications.
And I want to render some source-code inside a tag.
This source code is not, itself, HTML, so should I use dangerouslySetInnerHtml? Or something else?
At the moment it seems like new-lines are being lost when I use dangerouslySetInnerHtml and I'm wondering if this expected for real HTML content and that using an alternative would preserve white-space etc.
Currently I have to do the following:
interface MyCompProps {
someAttr: number
}
I want to use aria-, and then I have to list upfront all aria-* I need. Furthermore, I can't set a simple className on the component. How can I avoid this, i.e. allow normal HTML attributes on component? Or is it a bad practice? I'm skimming the Advanced Guides on reactjs website and nowhere mention that this is a bad practice, so I think it is acceptable.
Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML
Docs
I am trying to build a react app with customized components. The input to the app is a jsx(as a string) coming from an API.
Now i want to render this input jsx (a string variable), but not able to do that. I have tried eval() and dangerouslySetInnerHTML options, but it did not work out.
My JSX String looks like
'<div> <MyComponent attr_1={this.state.array["field"]}></MyComponent> </div>'
Hi I figured out JsxParser is the right way of solving my problem.
react-jsx-parser provides capability to parser and render react component from JSX string.
I am trying to load an SVG containing a map of country regions and then dynamically colorize the paths based on other data in the render function.
Is there a way in react to load a static SVG file at build or runtime and modify styles dynamically when rendering based on properties passed in?
You can use https://www.npmjs.com/package/react-samy-svg . This is how you can load an svg file and change an attribute. (No need to paste the svg code into the jsx)
<Samy path="https://raw.githubusercontent.com/hugozap/react-samy-svg/master/examples/1.svg">
<Proxy select="#Star" fill="red"/>
</Samy>
A Proxy element will select an svg element (using CSS selectors) and forward all its props to the selected element as attributes.
There is nothing hard about it.
Loading SVG file - just use $.ajax call for the resource, with dataType: 'text'
Use dangerouslySetInnerHTML to put it anywhere.
Changing of colors really depends on the way your SVG is structured. Ideally you should be able to change colors just using CSS (e.g. swap classes or generate style dynamically). If everything else fails, SVG is just text so you can do any text processing (color replacement) between steps 1 and 2.
I think it would be quite tough if even possible.
There are some approaches that claim to solve similar problem of converting string to react components (react-jsx-parser, html-to-react), or alternatively you can try converting html -> JSX -> JS (last step using babel) and subsequently requiring resulting js to obtain generated component.
Taking into account complexity of the steps above it might be simpler just to render SVG as html content of some div (using dangerouslySetInnerHTML) and later modify its styles using JS/jquery directly.
Our React app uses universal rendering. The html/body/head elements of the page are generated server-side using a React component. Normally, we can create things like <script> and <link> elements in our <head> just fine via JSX. Unfortunately, things got tricky once we started needing to insert third-party HTML fragments. These fragments are essentially a string like '<script src="some/url.js"></script><link rel="stylesheet" href="/some/css">'. Normally, HTML fragments can be injected into some element container via dangerouslySetInnerHTML, but there are no container elements for the <head> of an HTML document. This has forced us to either:
Parse the HTML fragments (no easy task) and convert them into React elements
Abandon JSX and build all our head content as one big concatenated/templated string
Is there any way in React to inject an HTML fragment into a document without a container element?
I think a combination of React Helmet to set the <head> at a component level and Interweave to inject/parse the HTML without using dangerouslySetInnerHTML could achieve what you're looking for?