为啥 ReactJS 不在另一个组件中渲染一个组件？
Posted
技术标签:
【中文标题】为啥 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 的渲染结果？
【问题讨论】：
【参考方案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 有一个很大的学习曲线，但要长期使用它……祝你项目好运！ :)以上是关于为啥 ReactJS 不在另一个组件中渲染一个组件？的主要内容，如果未能解决你的问题，请参考以下文章
ReactJs：为啥 ref.current 在渲染组件时返回 null？
为啥 ReactJS 中一个组件的 css 文件与另一个组件的 css 文件交互？如何处理？
为啥不在 Vue 和 Vue Router 生产环境中渲染我的组件？