Question

我正在学习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'))

＆LT;测试/＆gt; 未呈现，我有白页。

如果我从 filteredList.js中删除“导入测试'./Test'; ”和“ +＆lt; Test /＆gt; ”，我可以在页面中看到“示例文本”文本，这很好。

当我在来源标签中的Chrome中打开调试模式时，我看不到错误，如果我打开控制台标签，我看到了

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 中。

Html 位于 / src / resources / templates 中。

我应该在这里更改一下，我可以在filteredList.js中使用test.js的渲染结果吗？

Answer 1

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

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

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

Answer 2

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

Answer 3

为避免额外的div标记，您只需使用：

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

Answer 4

你应该移动该客户端（{方法：＆＃39; GET＆＃39;，路径：＆＃39; / hello-world＆＃39;}）。完成（response =＆gt; {}）并进入componentDidMount（），这样它就不会在每次重新渲染dom时触发（即如果你对所述值进行了更改）。

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

Answer 5

虽然你可以，但是你的页面中的反应组件有很多入口点（ReactDom.Render调用）并不常见。这是来自Angular（作为我自己:)的开发人员使用的常见模式

我建议您在Test组件内部使用IMPORT（或REQUIRE，如果您愿意），并在那里使用它。

我非常好的学习反应的起点是 create-react-app 项目。我将以一种简洁的方式设置最常见的配置和脚手架：https://github.com/facebook/create-react-app

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

5 个答案: