Global JS variable to pass HTML chunk to React component - javascript

I have a piece of HTML I need to send to a React component on page load without rendering it. I'd rather not us AJAX due to cache, but I may revert to that if I can't figure this out.
On the jsp side, I have this:
<script>window.banner_data_for_desktop = "...droplet..."</script>
This contains the HTML chunk I need to pass
<div id="desktop-top-banner">
<div>
...
</div>
</div>
On the jsx side, I've tried rendering directly like this:
<div id="top_bar">{window.banner_data_for_desktop}</div>
This renders the content, but displays the div tags as a string and not output as HTML.
So then I tried using dangerouslySetInnerHTML like this:
<div id="top_bar">dangerouslySetInnerHTML={{ __html: window.banner_data_for_desktop }}</div>
This results in an error:
Invariant Violation: Objects are not valid as a React child (found: object with keys {__html}). If you meant to render a collection of children, use an array instead.
I've tried using Stringify, toString, creating a function to return the html like this:
function createMarkup() {
return {__html: window.banner_data_for_desktop};
}
All without any luck. If any one has a suggestion to render HTML from the global JS object, I would greatly appreciate it!

dangerouslySetInnerHtml should be an attribute of the tag:
<div dangerouslySetInnerHTML={{__html: "HTML CHUNK"}}></div>

Related

&#039 "It' being rendered in React

I am making an API call to: https://opentdb.com/api.php?amount=10
and getting question and answer data and then rendering them
but instead of symbols, I am getting this &#039 " It'
rendering like this
export default function Question(props){
return (
<div className="Question-wrapper">
<div className="Question--question">{props.question}</div>
<div className="Question--options">
</div>
</div>
)
}
By default, React does not allow create tags from string variables because this is too dangerous. You could use dangerouslysetinnerhtml if it is rly necessary. Please read documentation by this link https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

How can I merge HTML attributes with component data in Vue?

I'm trying to extract some repeated code into a Vue component. I want to be able to pass a list of CSS classes into the component using the class HTML attribute, and merge those with a "default class" that is defined in the component. I want the public interface of this component to resemble a standard HTML element, but if I try to use "class" as a prop Vue throws an error about using a JS keyword. If I try to use $attrs, my default class gets wiped out.
Is it possible to merge HTML attributes with local component data, and use the result in my template? Below is what I would like to achieve:
<template>
<img src="imageUrl" class="classes"
</template>
export default {
computed: {
imageUrl() { return 'urlString' },
},
classes() { return `${this.$attrs.class} default-class` }
}
And I'd expect an implementer to be able to use my component like so:
<CustomImageComponent class="class-name another-class" />
Which I'd expect to render this:
<img src="urlString" class="class-name another-class default-class" />
It already happens (automatically)
using <CustomImageComponent class="class-name another-class" />
will render<template><img src="imageUrl" class="my-default-class"/></template>
as <img src="imageUrl" class="my-default-class class-name another-class"/>
(in that order, with the in-template class first, and the passed classes after)
the issue is that if you have a nested DOM element that you want to apply it to, you cannot do that and you will have to use a prop
ie:
using <CustomImageComponent class="class-name another-class" />
will render<template><div><img src="imageUrl" class="my-default-class"/></div></template>
as <div class="class-name another-class"><img src="imageUrl" class="my-default-class"/></div>
and there's nothing you can do about that, other than use custom props.
You just need to use v-bind: or only colon(:) before the attributes to pass data as a value and that's it, Vue automatically merge classes, see link below:
https://codesandbox.io/s/30oly1z326
A couple things you could do, both with this.$el.classList.
On mounted:
mounted() {
this.$el.classList.add('default-class');
}
Computed property:
computed: {
classListWithDefault() {
return `${this.$el.classList.toString()} default-class`;
}
}

Manipulate dom element outside React component

I have a React component that renders HTML only on a small part of a HTML document.
From within the React component I need to replace an element, that exist outside the component, with a block of HTML.
No matter how much I'm googling this, I cannot find a straight way to accomplish this, I assume that it's because React's guidelines that naturally prescribe to use ref instead.
How would I use document.getElementById() or anything similar to insert the following sample HTML block at the place of a certain div:
<div>
<div class='yellow'>YELLOW</div>
<div class='green'>GREEN</div>
<div class='blue'>BLUE</div>
</div>
Assign an id to the top level element of the html react renders. It will still include the id attribute and thus can still be referenced with document.getElementById
<div id="toReplace">
<div className="yellow">YELLOW</div>
<div className="blue">blue</div>
<div className="red">red</div>
</div>
componentDidMount() { //or wherever
document.getElementById('toReplace').append('more html');
}
const str = "<div><div class='yellow'>YELLOW</div><div class='yellow'>GREEN</div><div class='yellow'>BLUE</div></div>"
document.getElementById('toReplace').innerHTML = "";
document.getElementById('toReplace').insertAdjacentHTML( 'beforeend', str );

How to render HTML Template and bind data from JSON response in ReactJS?

I have to render an HTML template using reactjs. HTML template is dynamic and get through an API call. There is provision in template to bind the data in html.
Sample HTML template is as follows,
<a target="_blank" href="{ad.url}">
<div class="ads temp-1">
<h2>{ad.name}</h2>
<div class="adv-content">
<div class="advs-image">
<img src="{ad.image}" />
</div>
<div class="adv-desc">{ad.description}</div>
</div>
</div>
</a>
Here ad is an Object which contains the properties url, image, name, description etc
Sample ad Object is as follows,
var ad = {
"image": "testimage.jpg",
"url": "http: //google.com",
"name": "testadvertisement",
"description": "testdescription"
}
I have achieved this in AngularJs using, $compile service.
Now I want to move this to reactjs.
I have tried to render using reactjs render function, But it didn't help. It renders html as string.
Is there any compile like function in reactjs ? Or could you please suggest any other way to do this right way ?
Any help appreciated.
As I correctly undestand you should use dangerouslySetInnerHTML prop.
For example:
// SomeComponent.js
// other methods...
render() {
// `htmlFromResponse` is your plain html string from response.
return (
<div dangerouslySetInnerHTML={{ __html: htmlFromResponse }} />
);
}
Using this prop, you can render plain html string into div element.
If you are getting html template from server, and want to pass variable to it before rendering, you can do it with Mustache package:
import Mustache from 'mustache';
// template should contain variables in {{ ... }}
const html = Mustache.render(htmlFromServer, {
variable: 'value'
});
Next, you can render output html using dangerouslySetInnerHTML prop.
create a react component which renders the HTML data, then pass your Json data as Prop to the component. this will give React element access to data and Rendered HTML will be automatically updated when Json data changes.
Check out some react tutorial video over youtube, that will give you an overview of how ReactJs works
here is how to Pass Props
https://jsfiddle.net/abhirathore2006/6a403kap/
var Hello = React.createClass({
render: function() {
console.log(this.props)
return <div>Hello {this.props.name}
<h5>{this.props.d1.name}</h5>
id:{this.props.d1.id}
</div>;
}
});
ReactDOM.render(
<Hello name="World" d1={{"name":"test","id":"5"}} />,
document.getElementById('container')
);

How can I not have the initial HTML template rendered when using a PhoneJS dx-gallery widget and a template?

I am experimenting with the AngularJS approach for PhoneJS. So far I am really enjoying both frameworks.
Current issues:
Using a dx-gallery or dx-list with a datasource and a template will cause the initial un-bound template to be rendered when the view is navigated.
I found this out once I started using the dx-gallery widget and specifying a template. The console will show a network request for the initial template (not bound) being requested.
Code
<div dx-gallery="{ dataSource: imagesDataSource, height:'60%' }">
<div data-options="dxTemplate: { name: 'item' }">
<img src="http://somehostingcompany.com/{{public_id}}.jpg">
</div>
Question:
How can I not have the initial HTML template rendered when using a PhoneJS dx-gallery widget and a template?
Use ns-src binding instead of specifing src directly:
<img ng-src="http://somehostingcompany.com/{{public_id}}.jpg" />
Check out link https://docs.angularjs.org/api/ng/directive/ngSrc

Categories