為什么ReactJS不將一個組件渲染到另一個組件中？

Question

我正在學習ReactJs。 我想在另一個組件中使用一個組件。 我看了這個，這個，這個和其他資源，試圖應用解決方案，但是他們沒有幫助我...

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

<測試/>未呈現，我有白頁。

如果我刪除“ 從‘./Test’進口檢驗;‘和’+ <測試/>”從filteredList.js，我可以看到在網頁‘示例文本’的文本，這是很好的。

當我在Chrome的“ 源”選項卡中打開調試模式時，看不到錯誤，如果我打開“ 控制台”選項卡，則會看到

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

它導致test.js：

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

我已經從這里開始應用了解決方案，所以我認為這不是原因。

我所有的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在Test組件中是無用的

Answer 2

這是因為標簽<div id="test"></div>在您的HTML中不存在。 為了使React將組件呈現為DOM，它需要一個有效的DOM元素。 當document.getElementById('test')運行時，它將返回undefined對象，並且undefined的不是DOM元素。

Answer 3

為了避免額外的div標記，您可以簡單地使用：

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

Answer 4

您應該將該client（{method：'GET'，path：'/hello-world'}).done(response => {}）從渲染中移出，並移入componentDidMount（），以使其不會觸發每次重新渲染dom（即，如果您更改了所述值）。

您也應該永遠不要直接改變狀態。 使用this.setState（Object.assign（{}，this.state，response.entity}）;以便React渲染引擎可以處理重寫

Answer 5

盡管可以，但是在頁面中有很多React組件的入口點並不常見（ReactDom.Render調用）。 這是來自Angular的開發人員使用的通用模式（如我自己：））

我建議您在Test組件中導入（或如果需要，請輸入）filterList組件，並在其中使用它。

對於人們學習做出反應的一個很好的起點是create-react-app項目。 我將設置最常見的配置並以一種簡潔的方式搭建一些組件： https : //github.com/facebook/create-react-app

為什么ReactJS不將一個組件渲染到另一個組件中？

問題描述

5 個解決方案

解決方案1
2 已采納 2018-02-21 14:27:11

解決方案2
1 2018-02-21 14:26:28

解決方案3
0 2018-02-21 14:30:19

解決方案4
0 2018-02-21 14:31:19

解決方案5
0 2018-02-21 14:45:56

為什么ReactJS不將一個組件渲染到另一個組件中？

問題描述

5 個解決方案

解決方案1 2 已采納 2018-02-21 14:27:11

解決方案2 1 2018-02-21 14:26:28

解決方案3 0 2018-02-21 14:30:19

解決方案4 0 2018-02-21 14:31:19

解決方案5 0 2018-02-21 14:45:56

解決方案1
2 已采納 2018-02-21 14:27:11

解決方案2
1 2018-02-21 14:26:28

解決方案3
0 2018-02-21 14:30:19

解決方案4
0 2018-02-21 14:31:19

解決方案5
0 2018-02-21 14:45:56