在同一个html页面上调用react js的两个不同组件
[英]Call two different components of react js on same html page
问题描述
I am learning react.js by myself, so you may find this question a silly one.
我正在自学 react.js，所以你可能会发现这个问题很愚蠢。 But, I want to learn concepts.但是，我想学习概念。
home.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;
index.js索引.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;
index.html索引.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>
In my index.html , I have placed two divs, which are calling two different components, but the only first component is loaded on the page.在我的index.html 中，我放置了两个 div，它们调用了两个不同的组件，但页面上只加载了第一个组件。 Is there any way to call both of them?有什么办法可以同时调用它们吗？ And if not then why?如果不是，那为什么？
2 个解决方案
解决方案1
1 已采纳 2020-03-28 19:12:52
Here is the pattern.这是模式。
home.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>
);
}
}
export default AppStyle;
index.js索引.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...
you can also create a seperate component for the code您还可以为代码创建一个单独的组件
index.html索引.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>
解决方案2
1 2020-03-28 19:18:32
Nothing is importing and rendering Home .没有什么是导入和渲染Home 。 If you really wanted to render into two separate elements on the same page, then import Home into index.js and then you can render both.如果你真的想在同一个页面上渲染成两个单独的元素，那么将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'));
As others have pointed out though, the normal pattern is to only render a single react application per page.不过，正如其他人指出的那样，正常模式是每页仅渲染一个 React 应用程序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.