0

Using AngularJS 1.x, I used to do code like this to include static HTML content on a page:

...
<body>

<!-- Banner -->
<ng-include src="'banner.html'"></ng-include>

<!-- Navigational thumb -->
<div>
<div>
<ng-include src="'navbar.html'"></ng-include>
</div>
...

I would like to know how to do that in React (where I'm a total beginner).

Russ Bateman
  • 18,333
  • 14
  • 49
  • 65
  • Does `ng-include` read `banner.html` from disk? Do you use webpack? – Håken Lid Nov 29 '18 at 17:03
  • Possible duplicate of [How can I render HTML from another file in a React component?](https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component) – Håken Lid Nov 29 '18 at 17:04
  • @Håken Lid. Yes, banner.html is read from disk. I do not use webpack. – Russ Bateman Nov 29 '18 at 17:15
  • React can't access your file system on its own. You can use a build tool such as webpack to load the file at bundle time. – Håken Lid Nov 29 '18 at 17:18
  • I looked at the docs for ng-include. It seems that it fetches the resource with a http request at runtime. There's no react equivalent. It's possible to do, but you have to write your own implementation in javascript. It's more common to do this stuff at bundle time, using webpack `raw` loader. https://docs.angularjs.org/api/ng/directive/ngInclude – Håken Lid Nov 29 '18 at 17:30
  • I see and completely understand that this issue has no direct equivalent in React. Anyone know how to dispose of this question properly? I looked at Oleg's link, but it doesn't inspire a solution for me, so I hesitate to mark that as the answer. – Russ Bateman Nov 29 '18 at 17:41

1 Answers1

0

React use another way to render Html as Ang, you should create dump component to render some html and include it where you need. https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html - also check it.

Oleg Pinchuk
  • 56
  • 6