Why do not ReactJS render one component inside another?
Question
I am learning ReactJs. I want to use one componemt inside the other component. I looked this , this and this and other sources, tried to apply the solutions, but they did not help me...
My list.html contains:
<body>
...
<div id="filtered_list"></div>
<script src="built/test.js"></script>
<script src="built/filteredList.js"></script>
</body>
test.js :
'use strict';
const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {hellomsg: "one"};
this.state.hellomsg = "I cannot get information from the REST. If you can, help me please.";
}
render() {
client({method: 'GET', path: '/hello-world'}).done(response => {
//this.setState({hellomsg: response.entity});
this.state.hellomsg = response.entity;
});
return (
<p>{this.state.hellomsg}</p>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('test')
)
export default Test;
filteredList.js :
'use strict';
import Test from './Test';
const React = require('react');
const ReactDOM = require('react-dom');
class FilteredListManger extends React.Component {
render() {
return (
<p>Example Text</p> + <Test/>
)
}
}
ReactDOM.render(
<FilteredListManger />,
document.getElementById('filtered_list'))
< Test / > is not rendered, I have white page.
If I remove " import Test from './Test'; " and " + < Test / > " from filteredList.js , I can see "Example Text" text in the page, it's good.
When I open debug mode in Chrome in Sources tab, I do not see errors, if I open Console tab, I see
Uncaught Error: _registerComponent(...): Target container is not a DOM element.
It leads to test.js:
ReactDOM.render(
<Test/>,
document.getElementById('test')
)
I already applied solution from here , so I do not think this is the reason.
All my js files are in /src/main/js .
After webpack builds the project, they are in /src/resources/static/build .
Html s are in /src/resources/templates .
What should I change here to I can use rendered result of test.js in filteredList.js?
5 answers
solution1
2 ACCPTED 2018-02-21 14:27:11
You should wrap your return of FilteredListManger in a single div like this: `
<div>
<p>Example Text</p>
<Test/>
</div>
By the way, there is a lot of weird things in your code like the class to only use the render method in the FilteredListManger component... Then, you can delete the ReactDOM.render wich is useless in the Test component
solution2
1 2018-02-21 14:26:28
It's because the tag <div id="test"></div> doesn't exist in your HTML. For React to render the component to DOM it needs a valid DOM element. When document.getElementById('test') runs it returns an undefined object and undefined is not a DOM element.
solution3
0 2018-02-21 14:30:19
To avoid the extra div markup you could simply use:
<React.Fragment>
<p>Example Text</p>
<Test/>
</React.Fragment>
solution4
0 2018-02-21 14:31:19
You should move that client({method: 'GET', path: '/hello-world'}).done(response => {}) out of the render and into componentDidMount() so that it doesn't fire off on every re-render of the dom (ie if you make changes to said values).
You should also never mutate the state directly. Use this.setState(Object.assign({}, this.state, response.entity}); so that the React rendering engine can handle the re-write
solution5
0 2018-02-21 14:45:56
Although you can, it's not very common to have many entry points for react components in your page (The ReactDom.Render call). That is common pattern used by developers coming from Angular (as myself :) )
I would suggest you to IMPORT (or REQUIRE if you prefer) the filterList component inside the Test component and use it there .
I very good starting point for people learning react is the create-react-app project. I will setup most common config and scaffold some components in a neat way: https://github.com/facebook/create-react-app
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.