您可以在 CSS 中移动 React 创建的组件吗?正确的?
You can move React created components in CSS? Right?
我提前为这个愚蠢的问题道歉。
我使用 creat-react-app 样板创建了一系列组件。我将它们导入 app.js 并按预期呈现,但如果我尝试通过给我的组件一个 id 标记来使用 app.css 移动页面上的组件。没有任何反应。
我错过了什么?我认为一旦您导入组件,您就可以将其视为页面上的另一个 html 元素。
我再次为这个简单的问题道歉,感谢您的帮助。
请求代码:
我的组件之一;
import React from 'react';
import {Panel, Image} from 'react-bootstrap';
import galaxy from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/galaxy.jpg';
import David from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/David.jpg';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
bootstrapUtils.addStyle(Panel,'main','backgroundImg');
const IntroPanel =()=>(
<div>
<style type="text/css">
{`
.panel-backgroundImg{
width: 300px;
height: 150px;
border: 1px solid gray;
border-radius: 0px;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
}
#background{
position: fixed;
}
.galaxy-background{
width: 298px;
height: 148px;
}
#galaxy-pos{
position: fixed;
left: 1px;
top: 73px;
}
.DavidProp{
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid gray;
box-shadow: 0 0 0 3px white, 0 0 0 4px gray;
}
#DavidPos{
position: fixed;
left: 110px;
top: 185px;
}
.panel-main {
width: 300px;
height: 150px;
border-radius: 0px;
border: 1px solid gray;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
right: 200px;
}
#mainPanel{
position: fixed;
top: 222px;
left: 0px;
}
.Name{
font-weight: Bold;
}
#NamePos{
position: fixed;
top: 275px;
left: 95.5px;
}
.Intro{
}
#IntroPos{
position: fixed;
top: 300px;
left: 10.5px;
}
.sighting{
font-style: oblique;
font-size: 14px;
font-weight: Bold;
}
`}
</style>
<div>
<Panel bsStyle="backgroundImg" id="background">
<img src={galaxy} className="galaxy-background" id="galaxy-pos" alt="backgroundImg"/>
</Panel>
<Panel bsStyle="main" id="mainPanel">
<p className="Name" id="NamePos">
David Townsend
</p>
<p className="Intro" id="IntroPos">
"I am a Leaf on the wind, Watch how I soar"
<p>-Wash, <span className="sighting">Serenity</span></p>
</p>
</Panel>
</div>
<div>
<Image src={David} className="DavidProp" id="DavidPos" />
</div>
</div>
);
export default IntroPanel;
这里是 App.js:
import React, { Component } from 'react';
import './App.css';
import MenuBar from './Components/MenuBar.js'
import IntroPanel from './Components/IntroPanel.js'
import AboutPanel from './Components/AboutPanel.js'
class App extends Component {
render() {
return (
<div className="App">
<div>
<MenuBar Name="Inside David Townsend's Brain"
LinkName1="Thoughts" Link1="#"
LinkName2="About" Link2="#"
LinkName3="Ideas" Link3="#"
LinkName4="Resume" Link4="#" />
</div>
<div>
<IntroPanel id="test" />
</div>
<div >
<AboutPanel />
</div>
</div>
);
}
}
export default App;
这里是 App.css:
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#test{
position: fixed;
top: 300px;
left: 10.5px;
}
我回答了我自己的问题。答案分为两部分。
- 我需要将 css
position: fixed;
更改为 position: relative;
如果我没理解错的话css固定位置基本上是网页的世界坐标,css相对位置是父对象的局部坐标。
- 为了移动 React 组件,我创建了一个
<div>
,其中包含已创建的 React 组件,并使用 CSS. 移动了 <div>
我毫不怀疑可能有更优雅的方法,但这就是我解决问题的方法。
我提前为这个愚蠢的问题道歉。
我使用 creat-react-app 样板创建了一系列组件。我将它们导入 app.js 并按预期呈现,但如果我尝试通过给我的组件一个 id 标记来使用 app.css 移动页面上的组件。没有任何反应。
我错过了什么?我认为一旦您导入组件,您就可以将其视为页面上的另一个 html 元素。
我再次为这个简单的问题道歉,感谢您的帮助。
请求代码:
我的组件之一;
import React from 'react';
import {Panel, Image} from 'react-bootstrap';
import galaxy from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/galaxy.jpg';
import David from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/David.jpg';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
bootstrapUtils.addStyle(Panel,'main','backgroundImg');
const IntroPanel =()=>(
<div>
<style type="text/css">
{`
.panel-backgroundImg{
width: 300px;
height: 150px;
border: 1px solid gray;
border-radius: 0px;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
}
#background{
position: fixed;
}
.galaxy-background{
width: 298px;
height: 148px;
}
#galaxy-pos{
position: fixed;
left: 1px;
top: 73px;
}
.DavidProp{
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid gray;
box-shadow: 0 0 0 3px white, 0 0 0 4px gray;
}
#DavidPos{
position: fixed;
left: 110px;
top: 185px;
}
.panel-main {
width: 300px;
height: 150px;
border-radius: 0px;
border: 1px solid gray;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
right: 200px;
}
#mainPanel{
position: fixed;
top: 222px;
left: 0px;
}
.Name{
font-weight: Bold;
}
#NamePos{
position: fixed;
top: 275px;
left: 95.5px;
}
.Intro{
}
#IntroPos{
position: fixed;
top: 300px;
left: 10.5px;
}
.sighting{
font-style: oblique;
font-size: 14px;
font-weight: Bold;
}
`}
</style>
<div>
<Panel bsStyle="backgroundImg" id="background">
<img src={galaxy} className="galaxy-background" id="galaxy-pos" alt="backgroundImg"/>
</Panel>
<Panel bsStyle="main" id="mainPanel">
<p className="Name" id="NamePos">
David Townsend
</p>
<p className="Intro" id="IntroPos">
"I am a Leaf on the wind, Watch how I soar"
<p>-Wash, <span className="sighting">Serenity</span></p>
</p>
</Panel>
</div>
<div>
<Image src={David} className="DavidProp" id="DavidPos" />
</div>
</div>
);
export default IntroPanel;
这里是 App.js:
import React, { Component } from 'react';
import './App.css';
import MenuBar from './Components/MenuBar.js'
import IntroPanel from './Components/IntroPanel.js'
import AboutPanel from './Components/AboutPanel.js'
class App extends Component {
render() {
return (
<div className="App">
<div>
<MenuBar Name="Inside David Townsend's Brain"
LinkName1="Thoughts" Link1="#"
LinkName2="About" Link2="#"
LinkName3="Ideas" Link3="#"
LinkName4="Resume" Link4="#" />
</div>
<div>
<IntroPanel id="test" />
</div>
<div >
<AboutPanel />
</div>
</div>
);
}
}
export default App;
这里是 App.css:
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#test{
position: fixed;
top: 300px;
left: 10.5px;
}
我回答了我自己的问题。答案分为两部分。
- 我需要将 css
position: fixed;
更改为position: relative;
如果我没理解错的话css固定位置基本上是网页的世界坐标,css相对位置是父对象的局部坐标。
- 为了移动 React 组件,我创建了一个
<div>
,其中包含已创建的 React 组件,并使用 CSS. 移动了
<div>
我毫不怀疑可能有更优雅的方法,但这就是我解决问题的方法。