在同一個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