Сетка семантического интерфейса CDN не работает с реагировать? - PullRequest
Новая
       6

Сетка семантического интерфейса CDN не работает с реагировать?

1 голос
/ 21 марта 2019

Я создаю простое приложение для поиска giphy с реагированием. Кажется, что все классы в semantic-ui работают, за исключением системы сеток, в частности, создавая столбцы из GIF-файлов, которые извлекаются при поиске, они все выстраиваются вертикально. Это не первый раз, когда я сталкиваюсь с этой проблемой, и я надеюсь, что один из вас сможет понять, что я делаю неправильно, я не хочу снова решать эту проблему с помощью начальной загрузки, lol.

Я загрузил и импортировал semantic-ui-реакции в мои проекты реагирования, и этот синтаксис, похоже, тоже не работает. 

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

const SearchBar = (props) => {
  return (
    <div className="ui input">
      <input
        value={props.value} 
        placeholder="Find the gif of your dreams!" 
        type="text"
        onChange={e => props.onSearchInput(e.target.value)}
      />
    </div>
  );
}

const DisplayGifs = (props) => {

  const gifs = props.data.map(gif => {
    return (
      <div className="column">
        <div class="ui card" key={gif.id}>
          <div class="image">
            <img src={gif.images.fixed_width_downsampled.url} alt={gif.id} />
          </div>
        </div>
      </div>
    );
  })

  return (
    <div>{gifs}</div>
  );
}

class App extends Component {
  state = { searchTerm: '', gifs: [] }

  onSearchInput = (term) => {
    this.setState({ searchTerm: term })
  }

  onHandleSubmit = async (e) => {
    e.preventDefault();
    const gifs = await axios.get('http://api.giphy.com/v1/gifs/search?q=' + this.state.searchTerm + '&api_key=MRLay8p2J7b0XwOwbZOJVCau52Fn4B6R&limit=8')
    this.setState({ searchTerm: '', gifs: gifs.data.data })
  }

  render() {
    console.log(this.state.gifs)
    return (
      <div className="ui container">
        <h1>Gify Search API</h1>
        <div className="ui segment">
          <form onSubmit={this.onHandleSubmit}>
            <SearchBar 
              value={this.state.searchTerm}
              onSearchInput={this.onSearchInput}
            />
          </form>
        </div>
        <div className="ui three column grid">
          <DisplayGifs 
            data={this.state.gifs}
          />
        </div>
      </div>
    );
  };
};

export default App;

1 Ответ

2 голосов
/ 21 марта 2019

В компоненте вашего приложения, куда вы возвращаете <DisplayGifs>, он обернут сеткой div <div className="ui three column grid">. Однако в вашем <DisplayGifs> компоненте вы возвращаете <div>{gifs}</div>, поэтому при визуализации ваш html будет: 

<div className="ui three column grid">
  <div>
    <div className="column">...</div>
    <div className="column">...</div>
    <div className="column">...</div>
    ...etc
  </div>
</div>

Чтобы исправить это в <DisplayGifs> компоненте, выполните: 

return gifs

Вместо 

return (
  <div>{gifs}</div>
);

так ваш рендеринг html будет выглядеть так: 

<div className="ui three column grid">
   <div className="column">...</div>
   <div className="column">...</div>
   <div className="column">...</div>
   ...etc
</div>

Возвращая <div>{gifs}</div>, он нарушает структуру, которую ищет семантический пользовательский интерфейс, который является прямым потомком элемента div с сеткой классов, имеющей столбец class

...