我正在创建一个带有react的简单giphy搜索应用程序。语义ui中的所有类似乎都可以使用,除了网格系统外,特别是根据在搜索时插入的gif来创建列,它们都垂直排列。这不是我第一次遇到这个问题,我希望你们中的一个能弄清楚我做错了什么,我不想再用bootstrap来解决这个问题。
我已经下载了语义UI-react并将其导入到我的react项目中,并且该语法似乎也不起作用。
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;
答案 0 :(得分:2)
在您要返回<DisplayGifs>
的App组件中,它被网格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>
,它打破了ui所寻找的结构,它是div的直接子级,而div的类网格具有列类