在同一个html页面上调用react js的两个不同组件

Question

我正在自学 react.js，所以你可能会发现这个问题很愚蠢。 但是，我想学习概念。

主页.js

import React from 'react';
import ReactDOM from 'react-dom';

class AppStyle extends React.Component {
    render() {
        var myStyle = {
            fontSize: 100,
            color: '#FF0000'
        }
        return (
            <div>
                <h1 style = {myStyle}>Header Style</h1>
            </div>
        );
    }
}

ReactDOM.render(<AppStyle />, document.getElementById('style'));
export default AppStyle;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        var i = 1;
        return (
            <div>
                <h1>Header</h1>
                <h2>Content</h2>
                <p data-myattribute = "somevalue">This is the content!!!</p>
                <h1>{1+1}</h1>
                <h1>{i === 1 ? 'True' : 'False'}</h1>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

export default App;

索引.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="widht=device-width, initial-scale=1" />
        <title>Learn React</title>
    </head>
    <body>
        <div id="root"></div>
        <div id="style"></div>
    </body>
</html>

在我的index.html 中，我放置了两个 div，它们调用了两个不同的组件，但页面上只加载了第一个组件。 有什么办法可以同时调用它们吗？ 如果不是，那为什么？

Answer 1

这是模式。

主页.js

import React from 'react';
import ReactDOM from 'react-dom';

class AppStyle extends React.Component {
    render() {
        var myStyle = {
            fontSize: 100,
            color: '#FF0000'
        }
        return (
            <div>
                <h1 style = {myStyle}>Header Style</h1>
            </div>
        );
    }
}

export default AppStyle;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './home';

class App extends React.Component {
    render() {
        var i = 1;
        return (
           <>
                <div>
                    <h1>Header</h1>
                    <h2>Content</h2>
                    <p data-myattribute = "somevalue">This is the content!!!</p>
                    <h1>{1+1}</h1>
                    <h1>{i === 1 ? 'True' : 'False'}</h1>
                </div>
                <Home />
           </>

        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));


export default App;    // not necessary since you are rendering already...

您还可以为代码创建一个单独的组件

索引.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="widht=device-width, initial-scale=1" />
        <title>Learn React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Answer 2

没有什么是导入和渲染Home 。 如果你真的想在同一个页面上渲染成两个单独的元素，那么将Home导入index.js ，然后你就可以渲染这两个元素了。

import React from 'react';
import ReactDOM from 'react-dom';
import AppStyle from './home';

class App extends React.Component {
    render() {
        var i = 1;
        return (
            <div>
                <h1>Header</h1>
                <h2>Content</h2>
                <p data-myattribute = "somevalue">This is the content!!!</p>
                <h1>{1+1}</h1>
                <h1>{i === 1 ? 'True' : 'False'}</h1>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<AppStyle />, document.getElementById('style'));

不过，正如其他人指出的那样，正常模式是每页仅渲染一个 React 应用程序。

在同一个html页面上调用react js的两个不同组件

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-03-28 19:12:52

解决方案2
1 2020-03-28 19:18:32

在同一个html页面上调用react js的两个不同组件

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-03-28 19:12:52

解决方案2 1 2020-03-28 19:18:32

解决方案1
1 已采纳 2020-03-28 19:12:52

解决方案2
1 2020-03-28 19:18:32