I'm working on web porject, I want to use reactjs, the template I'm using calls external js files which loads remote html file. for example
<header role="banner">
<script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script>
</header>
I thought of converting the above to react like the following
import React, {
Component,
} from 'react';
// loads header and footer
class HF extends Component {
render() {
return (
<header role="banner">
<script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script>
</header>
);
}
}
export default HF;
my template
<body>
<header role="banner">
<!-- loads header and footer -->
<script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script>
</header>
<div class="sidebar">
<!-- loads sidebar menu -->
<script type="text/javascript" src="/remote/webassets/js/sidebar.js"></script>
</div>
<main>
<!-- content -->
</main>
<footer class="footer"></footer>
<script>
$(window).load(function() {
$('[data-class=lazyload]').each(function() {
//* set the img src from data-src
$(this).attr('href', $(this).attr('data-href'));
});
$('.lazyload').each(function() {
//* set the img src from data-src
$(this).attr('src', $(this).attr('data-src'));
});
});
const loadScriptAsync = () {...};
window.onload = loadScriptAsync
(function() {
'use strict';
window.MyEvenArray = function(callback) {...};
window.ErrorEvents = new window.MyEvenArray();
window.onerror = function(msg, url, line, col, error) {
...
window.ErrorEvents.push(d);
};
})();
</script>
</body>
Is there a better way converting this to react or should I just stick to using plain html?
from How to convert html template which load external html to reactjs
No comments:
Post a Comment