Блог

Я новичок в React, и я пытаюсь использовать компонент несколько раз на странице с другим цветом фона каждый раз, когда я его использую. Я попробовал приведенный ниже код (который не изменяет цвет фона) и не смог найти ничего полезного в Интернете. Кто-нибудь знает, как это сделать?

Компонент, о котором я говорю, — это «Раздел»

Главная страница:

 function App() {
  return (
    <div className="App">
      <Navbar />
      <h1 id="mainTitle">My website</h1>
      <h1 id="subTitle">a cool new website</h1>
      <Section style={{backgroundColor: "red"}}/>
      <Section style={{ backgroundColor: "blue"}}/>
    </div>

  );
}
  

Компонент CSS:

 .section{
  text-align: left;
  font-size: large;
  padding: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}
  

Компонент JS:

 import './Section.css';

function Section() {
    return (
        <div class="section">
            <p>Text example</p>
            <p>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
            </ul>
            </p>
        </div>
    );
}

export default Section;
  

Согласно вашему вопросу, вы не понимаете JSX.

JSX — это не HTML. Это означает, что когда вы пишете <something> , Babel компилятор определяет, хотите ли вы создать HTML-элемент или отобразить компонент. Вот почему все компоненты должны быть заглавными буквами (компилятор должен найти разницу).

В вашем случае

<Section> — вы просите отобразить раздел компонента с реквизитами style (отправьте реквизит дочернему элементу).

<div class="section"> — вы просите отобразить HTML-элемент с помощью класса arrtibute.

Решение: вам нужно добавить style в div , вот так:

 function Section(props) {
  return (
    <div style={props.style} className="section">
      <p>Text example</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
      </ul>
    </div>
  );
}
  

Лучшее решение:

 function Section(props) {
 return (
   <div {...props} className="section">
     <p>Text example</p>
     <ul>
       <li>item 1</li>
       <li>item 2</li>
     </ul>
   </div>
 );
}
  

Таким образом, если у вас очень длинный список реквизитов, вам не нужно определять весь список в div .

Полный код: https://codesandbox.io/s/hopeful-brown-xmtzy?file=/src/Section.js:27-219