Geek Answers Handbook

React: how to download and display an external html file?

I am creating a small blog application using React and Redux. The blog displays a page with the title, author, tags and description of the message. When I click on the header or the "read more" button, I want to download and display an HTML file with the corresponding entry from the local project data folder with all messages.

Redux manages the state of the blog by loading the initial posts.json file with 8 different posts, including htmlPath for the corresponding html file in the data folder.

+6
source share
4 answers

As I can see, you have 2 problems to solve here. First, how to set the innerHTML element in React. Another way is to get specific HTML for rendering depending on the given variable (for example, the current route, entering a text field, etc.).

1. Setting innerHTML element

You can do this with dangerouslySetInnerHTML prop. As the name suggests, it sets the innerHTML specified element according to what you specify ... and yes, the "dangerous" is accurate, as it is intended to make you think twice before using this function.

The official documentation reads as follows:

Misuse of innerHTML may open you up to cross-site scripting (XSS) attacks. Sanitizing user input for display is generally error prone, and failure to properly disinfect is one of the leading causes of Internet vulnerabilities on the Internet.

Check out the demo or snapshot below.

 var Demo = React.createClass({ getInitialState: function() { return {showExternalHTML: false}; }, render: function() { return ( <div> <button onClick={this.toggleExternalHTML}>Toggle Html</button> {this.state.showExternalHTML ? <div> <div dangerouslySetInnerHTML={this.createMarkup()} ></div> </div> : null} </div> ); }, toggleExternalHTML: function() { this.setState({showExternalHTML: !this.state.showExternalHTML}); }, createMarkup: function() { return {__html: '<div class="ext">Hello!</div>'}; } }); ReactDOM.render( <Demo />, document.getElementById('container') ); 
 .ext { margin-top: 20px; width: 100%; height: 100px; background: green; color: white; font-size: 40px; text-align: center; line-height: 100px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>

2. Getting HTML from an external source

Please note that the above example does not actually output HTML from an external file, but is entered directly as a string.

One easy way to dynamically select a specific file is to allow your server (e.g. php) to read the file from the local folder, parse the text and send it back through an AJAX request.

Example

 //Your React component fetchExternalHTML: function(fileName) { Ajax.getJSON('/myAPI/getExternalHTML/' + fileName).then( response => { this.setState({ extHTML: response }); }, err => { //handle your error here } ); }
+11
source

While Chris answered well, his work required even more digging. Here are the steps you need to take:

Add the html loader to the project:

 npm i -D html-loader

Add the following rule to your webpack.config file:

 { test: /\.(html)$/, use: { loader: 'html-loader', options: { attrs: [':data-src'] } } }

Now you can import your html file as follows:

 import React, { Component } from 'react'; import Page from './test.html'; var htmlDoc = {__html: Page}; export default class Doc extends Component { constructor(props){ super(props); } render(){ return (<div dangerouslySetInnerHTML={htmlDoc} />) }}
+4
source

If you are really sure, get a message about what you like on the file system with the server code, and show it in the React component using dangerouslySetInnerHTML :

 function createMarkup() { return {__html: 'First &middot; Second'}; }; <div dangerouslySetInnerHTML={createMarkup()} />

More details in the docs: https://facebook.imtqy.com/react/tips/dangerously-set-inner-html.html

0
source

You can try react-templates . This is the best". You can have your template as an external file and upload it whenever you want, and it will appear as a charm with all React APIs available.

Hope this helps.

0
source

More articles:


All Articles