Question

在学习基本的ReactJS的过程中，我尝试创建以下布局，但未能成功找到解决方案，该解决方案将我引导到该特定布局，当在桌面上打开该布局时，它看起来将如下所示（但由于它具有响应性希望它将重新调整到屏幕上）：

这是我正在尝试的代码，但不确定如何将其转换为我想要的responsive布局。

import React from 'react';

function Header() {
  return (
    <div> I am the header</div>
  )
}

   // each footer is 50% wide
function Footer1() {
  return (
    <div> I am footer 1</div>
  )
}

function Footer2() {
  return (
    <div> I am footer 2</div>
  )
}

// left col has with 84%
function LeftCol() { 
  return (
    <div>
      <form>
        <div>col1 width 84%</div>
        <div>col1 row1</div>
      </form>
    </div>
  )
}

function RightCol() { 
  return (
    <div>
      <form>
        <div>col2 width 16%</div>
        <div>col2 row1</div>
      </form>
    </div>
  )
}

function App() {
  return (
    <div>
      <Header />
      <LeftCol />
      <RightCol />
      <Footer1 />
      <Footer2 />
    </div>
  );
}

export default App;

编辑：我正在尝试使用最少的html和CSS来实现这一目标，但要通过ReactJS和Material UI作为学习练习。

Answer 1

类似的事情可能会对您有所帮助。

查看是否适合您

注意：：这是React和CSS之间的非常基本的集成。如果您没有CSS经验，建议您进行W3Schools CSS course。一旦完成，我建议您研究Styled Components，我认为这是在React组件中处理CSS的一种更好的方法。在官方文档和其他教程中学习React basics也是一个优先事项。

片段：

function Header() {
  return(
    <div className="header">I am Header</div>
  );
}

function Main() {
  return(
    <div className="main">
      <LeftCol/>
      <RightCol/>
    </div>
  );
}

function LeftCol() { 
  return (
    <div className="leftCol">
      <div>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>      
      </div>
    </div>
  );
}

function RightCol() { 
  return (
    <div className="rightCol">
      <div>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  );
}

function Footer() {
  return(
    <div className="footer">I am Footer</div>
  );
}

function App() {
  return(
    <div>
      <Header/>
      <Main/>
      <Footer/>
    </div>
  );
}

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

.header {
  width: 100%;                 
  height: 80px;                
  display: flex;               
  align-items: center;         
  justify-content: center;     
  font-weight: bold;           
  background-color: lightblue;
}

.main {
  width: 100%;
  /*height: 200px;*/
  display: flex;
  
}

.leftCol {
  flex: 0 0 84%;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rightCol {
  flex: 0 0 16%;
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
}



.footer {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: salmon;
  font-weight: bold;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

在ReactJS中的多个列和行中显示响应文本

1 个答案: