Question

我提前为这个愚蠢的问题道歉。

我使用creat-react-app样板创建了一系列组件。我将它们导入app.js并按预期呈现，但是如果我尝试使用app.css移动页面上的组件，则为我的组件提供id标记。没有任何事情发生。

我错过了什么？我认为一旦导入组件，您就可以将其视为页面上的另一个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;
}

Answer 1

我回答了自己的问题。答案分为两部分。

我需要将css position: fixed;更改为position: relative;

如果我理解正确，css固定位置基本上是网页的世界坐标，而css相对位置是父对象的局部坐标。

要移动React组件，我在其中创建了一个<div>，其中包含已创建的React组件，并使用CSS移动了<div>。

我毫不怀疑可能有一种更优雅的方式，但这就是O如何解决我的问题。

你可以在CSS中移动React创建的组件吗？对？

1 个答案: