Блог

A. Я хочу создать сетку 2×3. Сетка будет состоять из одного компонента, содержащего различную информацию. У каждого компонента есть изображение, изображение alt, заголовок и описание. Опять же, каждый компонент находится внутри сетки 2×3.

Мне удалось добиться отображения каждого компонента друг над другом. Но я хочу, чтобы они были сопряжены. Я попытался использовать функцию .map() для итерации по списку и успешно получил дамп элементов. Я не знаю, как управлять компонентами по отдельности, поскольку то, что я делал, — это дамп списка элементов. Я не знаю, как использовать CSS с этим, поскольку я не могу контролировать

 <component />
  

Теперь это все <div>{webItems}</div> дамп.

 // From App.js

    function App() {
      const webItems = webImages.map(item => <WebItem key={item.id} item={item} />);
      return <div>{webItems}</div>;
    }

    // From WebItem.js

    function WebItem(props) {
      return (

            <div className="webItem" key={props.item.id}>
              <img src={props.item.imageURL} alt={props.item.imageAlt} />
              <h3>{props.item.imageTitle}</h3>
              <p>{props.item.imageBlurb}</p>
            </div>

      );
    }

//There is an external file using a webImages variable as an array holding objects of individual, key, imageURL, imageAlt, imageTitle and imageBlurb info.
  

Я не уверен, есть ли CSS или метод react JS для решения этой проблемы. Я просто хочу, чтобы каждое изображение и его собственное описание были в сетке 2×3. Я также хотел бы иметь возможность стилизовать каждый из них, если это возможно.

Проблема, с которой вы сталкиваетесь, заключается в том, что вы накладываете 6 секунд друг на друга. div Но вам нужна структура, подобная сетке. Один из способов сделать это — окружить каждую пару в a div и использовать display: flex .

Я написал код для группировки массива в массив из 2, чтобы упростить рендеринг.

 const webImages = [1, 2, 3, 4, 5, 6];
function App() {
  // [[1, 2], [3, 4], [5, 6]]
  const groupedItems = webImages.reduce((groups, item, idx, arr) => {
    if (idx % 2 === 0) {
      groups.push(arr.slice(idx, idx   2));
    }
    return groups;
  }, []);
  const webItems = groupedItems.map(([item1, item2]) => (
    <div className="row">
      <WebItem key={item1} item={item1} />
      <WebItem key={item2} item={item2} />
    </div>
  ));
  return <div>{webItems}</div>;
}

function WebItem(props) {
  return <div className="webItem">{props.item}</div>;
}

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

 .row {
  display: flex;
}

.webItem {
  height: 5rem;
  width: 5rem;
  border: 1px solid;
  background: lightblue;
}  

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