Question

我正在将我的页面从html和jquery迁移到使用React，并且我知道React Router和Redux是构建React应用程序时处理路由的方法，但是就目前而言，我想知道如何可以更改我的设置以能够为不同页面呈现不同的反应组件。目前，我能够在加载索引页面时呈现一个react组件，但是我认为我可以在其下面添加另一个ReactDOM.render()并在另一个页面上为该组件指定不同的div id，但是我注意到错误Invariant Violation: Target container is not a DOM element。这与不使用反应路由器或其他东西有关吗？

这是我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';


ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));

这里是<CreateAnnotation/>：从'react'导入React；

//GET /api/activity-feed and set to state

    export default class CreateAnnotation extends React.Component {
        constructor(props, context) {
            super(props, context);
            this.state = this.context.data || window.__INITIAL_STATE__ || {
                notifications: [],
                reportLinks: [],
                files: []
            }
        }

        render() {  
            return (
                <div>
                    <p>test</p>
                </div>
            )
        }

    }

这是视图文件：

<!DOCTYPE html>
<head>
    {{> app/app-head}}
</head>
<body>
    <div id="annotation-form"></div>
    {{> general/bundle-js}}
</body>
</html>

{{> general/bundle-js}}：

<script src="/bundle.js"></script>

Answer 1

ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

从技术上讲，您不能使用多个ReactDOM渲染功能将多个React元素渲染到DOM中，因为它将始终替换先前渲染的DOM。

请参见https://reactjs.org/docs/react-dom.html

正确的方法是创建多个组件并将其导入App.js文件。然后，您的index.js文件应该导入App.js文件作为一个整体组件，使用ReactDOM仅将App.js呈现为单个组件。

用于单独页面的ReactJS ReactDOM渲染

1 个答案: