I am trying to display a page html in React Js But I don't get the same look This is the code I used in React js
<div dangerouslySetInnerHTML={{ __html: data }}/>
This is the page when it's executed in html
enter image description here
This is the page when it's executed in React js
enter image description here
I used tag iframe and it worked
<iframe srcdoc={data}/>
Related
I'm currently working on a project, a social media type website where people can create posts and add an image to it. So far this is working, the post is created and the image is being saved locally to a folder. The issue I'm having in the home.js file is that the image is not showing on page render, instead it is showing an image icon with the alt text and telling me in the console:
GET http://localhost:3001/images/1664455878582selfie.png 404 (Not Found)
I am not yet getting the link from the SQL database but adding it manually to the code to first check that it will show.
This is the code on the home.js file:
const image = 'http://localhost:3001/images/1664455878582selfie.png';
And the return function:
return (
<div className='home'>
<div className='post'>
<img src={image} alt="postphoto"/>
</div>
</div>
)
The images are stored in project/server/images and the server is hosted on port 3001.
The code is available on https://github.com/ohsand/groupomania2 if this helps!
Thanks in advance!
The direct variable image link doesn't work in React. You should import the image first and then use it. Given below the demo code, you need to modify based on your project.
import image from './images/1664455878582selfie.png';
<div className='post'>
<img src={image} alt="postphoto"/>
</div>
'./images/1664455878582selfie.png' section will be according to your File-Structure.
I'm using Datawrapper to display graphs as iframes on my website.
I just recently migrated from Remark to MDX. With the new setup, my Datawrapper graphs aren't loading before the page that contains the graphs is allowed to load in the "traditional" sense (i.e., hitting refresh or following the page that contains the graphs directly).
So, if you follow this link, the graphs display fine: kolstadmagnus.no/ekspert-mener-a-ha-svaret-bak-krfs-stortingssmell.
But if you go to the home page (kolstadmagnus.no) and then hit the link (second-top post), the graphs won't display.
Some context
Datawrapper iframes use this script so that the iframes will be responsive:
!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
Since Gatsby works the way it does (not loading every page "traditionally"—sorry, I don't know what the feature is called), I have had to put this script in the html.js file, like this:
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
<script
dangerouslySetInnerHTML={{
__html: `
!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}(); `
}}
/>
</body>;
This causes the script to be executed for the entire website instead of just for that single page, thereby solving the issue where hitting refresh would be required after entering the pages with the iframes.
With MDX though, problems are back. But now the iframes don't display at all.
How do I solve this?
Gatsby extends its navigation and its "loading page" from #reach/router, so from React.
I'd extremely discourage embedding a custom script that needs to be rendered in certain pages in the html.js since, as you pointed, it will be loaded globally. You can achieve the same effect by running it locally or atomizing it.
The problem you are facing is that the script points directly to the DOM (because of the use of window.addEventListener) while in React (and hence with Gatsby) you create and manipulate a virtual DOM (vDOM). Playing and manipulating both can cause misleading behaviors because one doesn't know when the other changes and vice-versa, breaking the hydration and rehydration process (that's why you see the results on refresh: because hydration never occurs).
That said the ideal solution would be using a React-based Datawrapper module like react-datawrapper-chart or using another custom solution. Making scripts responsive is not a big deal, you can make the same calculations using React-based code.
Alternatively, following your "working" approach, you can load your custom script using the Helmet component on a certain page:
const SomeSpecificPage = () =>{
return <>
<Helmet>
<script
dangerouslySetInnerHTML={{
__html: `
!function(){"use strict";window.addEventListener("message",
(function(e){if(void 0!==e.data["datawrapper-height"]){var
t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}(); `
}}
/>
</Helmet>
</>
}
I am wanting to create a blog, this blog is for me to record my journey learning to become a software engineer/web developer. I have a separate offline blog uploader where I will create a title and the content and upload it to a database this has two inputs.
1.title
2.post_text
. However I want my blog posts to be able to render custom html for example the output from the database is this title: Test, post_text:<h1>This is a test!</h1>
However I have no clue how to render this HTML.I tried using createElement() and. then adding that to the DOM however that wasn't working First step is displaying it on the 'all posts' section in mini cards. Next would be creating the page that will render this detail.
I am using React.js for the blog. Can anyone link me to some help, or can anyone suggest any ideas I could to tackle this issue
React has dangerouslySetInnerHTML for exactly this. If you're receiving HTML and you want it to be rendered as HTML (not as a string):
<div dangerouslySetInnerHTML={{ __html: post_text }} />
You should make sure your HTML is coming from a trusted source - in your case, a CMS should be fine.
I want to re-use my custom web component. My web pages are primarily defined by HTML files, not Javascript. Is there any viable way to insert my component into my main file using HTML/Javascript/jQuery? (I know I could assemble it via server-side programming, but that's far less reusable.)
Simple Example
File widget.html:
<template>
// some content
</template
Main file main.html:
<div id="foo"></div>
<script>
$("#foo").load("widget.html); // does not work.
</script>
Note that this code fails for only the <template> ... </template> portion of any file I try to load. If I place other valid (and even invalid) HTML elements such as <div> or <foobar>, those elements get inserted into my page.
Let's say I have a widget that is like a simple interest calculator it is in a file index.html and it has a javascript part (with logic and style). The code uses javascript, html, bootstrap, ajax and chartjs.
How do I make it into a one line widget that i can copy and paste into my wordpress site ?
something like inside a div. So that I can copy a div and a link to script file and thus put my calculator on a page in multiple sites.
elements to embed is in a html file named-index.html
the html file is also on a site like someexamplesite.com/pages.html
logic and style in a js file: simpleinterest.js
You could use an iframe to embed your calculator on other sites like this:
<iframe src="https://someexamplesite.com/pages.html"></iframe>