为什么 ReactJS 不在另一个组件中渲染一个组件？答案

【问题标题】：Why do not ReactJS render one component inside another?为什么 ReactJS 不在另一个组件中渲染一个组件？
【发布时间】：2018-08-01 04:05:04
【问题描述】：

我正在学习 ReactJs。我想在另一个组件中使用一个组件。我查看了this、this 和this 和其他来源，尝试应用解决方案，但它们没有帮助我...

我的 list.html 包含：

<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'))

没有渲染，我有白页。

如果我从 filteredList.js 中删除“import Test from './Test';”和“+ ” ，我可以在页面中看到“Example Text”文字，很好。

当我在 Chrome 中的 Sources 选项卡中打开调试模式时，我看不到错误，如果我打开 Console 选项卡，我会看到

Uncaught Error: _registerComponent(...): Target container is not a DOM element.

它导致 test.js：

ReactDOM.render(
<Test/>,
document.getElementById('test')
)

我已经申请了here的解决方案，所以我认为不是这个原因。

我所有的 js 文件都在 /src/main/js 中。

webpack 构建项目后，它们位于 /src/resources/static/build。

Htmls 位于 /src/resources/templates。

我应该在此处更改什么，以便在过滤列表.js 中使用 test.js 的渲染结果？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您应该将返回的 FilteredListManger 包装在一个 div 中，如下所示： `

<div>
 <p>Example Text</p>
 <Test/>
</div>

顺便说一句，你的代码中有很多奇怪的东西，比如只使用 FilteredListManger 组件中的 render 方法的类...... 然后，您可以删除在 Test 组件中无用的 ReactDOM.render

【讨论】：

谢谢。我像你建议的那样添加了 div，并从 test,js 中删除了 ReactDOM.render。它有效！

【解决方案2】：

这是因为标签 <div id="test"></div> 不存在于您的 HTML 中。要让 React 将组件渲染到 DOM，它需要一个有效的 DOM 元素。当document.getElementById('test') 运行时，它会返回一个undefined 对象，而undefined 不是一个DOM 元素。

【讨论】：

如果我还将 div 标签添加到 FilteredListManger 的返回中，您的建议将起作用。谢谢。

【解决方案3】：

为了避免额外的 div 标记，您可以简单地使用：

<React.Fragment>
 <p>Example Text</p>
 <Test/>
</React.Fragment>

【讨论】：

并非所有工具集都支持此功能。在此处阅读有关此方法的更多信息：https://reactjs.org/docs/fragments.html

【解决方案4】：

您应该将该 client({method: 'GET', path: '/hello-world'}).done(response => {}) 移出渲染并移到 componentDidMount() 中，这样它就不会每次重新渲染 dom 时触发（即，如果您更改所述值）。

你也不应该直接改变状态。使用 this.setState(Object.assign({}, this.state, response.entity}); 以便 React 渲染引擎可以处理重写

【讨论】：

感谢您的评论，非常感谢。

【解决方案5】：

尽管您可以，但在您的页面中拥有许多 React 组件的入口点并不常见（ReactDom.Render 调用）。这是来自 Angular 的开发人员常用的模式（我自己 :)）

我建议您在 Test 组件中 IMPORT（或 REQUIRE，如果您愿意）并在其中使用它。

create-react-app 项目是人们学习 React 的一个很好的起点。我将以简洁的方式设置最常见的配置和脚手架一些组件：https://github.com/facebook/create-react-app

【讨论】：

我从 test.js 中删除了 ReactDOM.render。谢谢你的链接。
很好！！ React 有一个很大的学习曲线，但要长期使用它……祝你项目好运！ :)