HTML markup like this:
<div id="my-component">
<div>Some content goes here</div>
</div>
Having this in app.js file:
ReactDOM.render(<MyComponent/>, document.getElementById('my-component));
I want to get innetHTML of #my-component before that react component is mounted.
Using ReactDOM.findDOMNode in componentWillMount is not working because the element is not still mounted so returns null and in componentDidMount innerHTML has been replaced.
I did the following to achieve this:
const el = document.getElementById('my-component');
ReactDOM.render(
<App>{el.innerHTML}</App>,
el
);
Then in my react component I can render the html like so:
render() {
return (
<div dangerouslySetInnerHTML={{__html: this.props.children}}></div>
);
}
Related
My HTML renders my jsx file if nothing is being imported, but when I do import for example bootstrap or react, nothing gets rendered
var Hello = React.createClass ({
render() {
return (
<div>
<p>Hello World!</p>
<button>Test</button>
</div>
);
}
});
React.Render(<Hello />. document.getElementId("reactdiv")
This on its own works perfectly fine, but if I import say import React from "react"; it doesn't render anything
So I have an index.html file like this where there is a span outside of root div.
// index.html
<div id="root" class="root-container">
<div class="splash-holder">
<div class="triangle-holder">
<div class="triangle four"></div>
<div class="triangle five"></div>
<div class="triangle six"></div>
</div>
</div>
</div>
<span class="hidden-tag" id="hidden-span"></span>
and my Index.js file looks like this, where you can see main app is being rendered inside root-container.
// index.js
const MainApp = () => (
<Provider store={store}>
<Foo />
</Provider>
);
ReactDOM.render(<MainApp/>, document.querySelector('.root-container'));
and my Foo component file is like the following.
// Foo.js
const Foo = () => {
const ele = document.getElementById('hidden-span');
ele.innerHTML = 'dsaas';
}
Though this works fine in the actual app but when I try to render component using react testing library. eg.
// Foo.test.js
import { render } from '#testing-library/react';
import Foo from ./components;
render(<Foo />);
I get the error that cannot find innerHTML of null. How can I solve this issue?
I am using owl-react-carousel in my react app. owl carousel injects some div after component render. I want to create a div using react-dom and then want to wrap owl carousel's injected div. trying to make more clear
class Items extends Component {
render() {
return (
<div className="item"></div>
)
}
}
after render this component owl carouse injects some node inside item class. Like bellow
<div className="item">
<div className="owl-nav"></div>
</div>
Now i want to create my own div and then want to wrap owl-nav div
expected : want to create new node <div className="custom-nav"></div>
component should look like
<div className="item">
<div className="custom-nav">
<div className="owl-nav"></div>
</div>
</div>
I could made it like be
componentDidMount() {
const appNode = ReactDOM.findDOMNode(this);
var searchingElement = appNode.querySelector("div.owl-nav");
var wrapperElement = document.createElement("div");
wrapperElement.setAttribute("class", "custom-nav");
searchingElement.parentNode.insertBefore(
wrapperElement,
searchingElement
);
wrapperElement.appendChild(searchingElement);
}
It meets my requirement but i dont want to use document direct in react so tried react.createElement but then it says wrapper is not a node
I'm trying to render a react component inside a html page. what i did so far is implementing react like this
var component = React.createClass({
render: function(){
var testStyle = { fontSize: '18px', marginRight: '20px'};
return (
<div>
<h1>Hello React</h1>
<div><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></div>
</div>
)
}
});
ReactDOM.render(< component/>,
document.getElementById('content')
);
and in the HTML page i have this
<div id="content"></div>
when i inspect the HTMl page i find that inside the div i have an empty component like this
<component data-reactroot=""></component>
what am i doing wrong here
A React component must always start with a capital letter, otherwise React interprets it as a simple HTML element.
Capitalized types indicate that the JSX tag is referring to a React component.
That being said, define
const Component = React.createClass...
and then render like
ReactDOM.render(<Component />,
document.getElementById('content')
);
I am learning ReactJS and in ALL examples that I see on the web the HTML code is always rendered inline, meaning that you have to add all HTML markup directly into the JS file which is super ugly and very hard to work with (if you have a lot of markup). Isn´t there a way to put all HTML in a separate file just referens that file when rendering? Like we do in Rails or Angular 2.
This is my code:
var Main = React.createClass({
render() {
return (
<div> <h1>Hello, World!</h1> </div>
)
}
});
I want to put this in a separate file:
<div> <h1>Hello, World!</h1> </div>
You can put your html in a separate .js file and import it in your component then use,
htmlMarkup.js
module.exports = `<div> <h1>Hello, World!</h1> </div>`;
and then in your component
render() {
return (<div dangerouslySetInnerHTML={require('path/to/htmlMarkup.js')} />)
}
if you want to set some property in your html file, then you can export a function instead of string.
module.exports = (message) => `<div> <h1>${message}</h1> </div>`;
and then in render method.
render() {
return (<div dangerouslySetInnerHTML={require('path/to/htmlMarkup.js')('Hello World')} />)
}