#javascript #reactjs #jsx
#javascript #reactjs #jsx
Вопрос:
Я новичок в использовании React, и я не уверен, какая наилучшая практика или правильный способ отображения данных.
Должен ли я всегда стремиться разбивать вещи, которые потенциально могут быть их собственным компонентом, на более мелкие компоненты, вместо того, чтобы отображать один большой компонент? Я предполагаю, что да. Я просто не знаю, когда.
В любом случае, у меня есть следующий компонент, который отправляет запрос на выборку в api. Он возвращает некоторые данные. Я устанавливаю состояние для данных. Затем я создаю переменную coins, которая преобразует данные в <ul>
with <li>
. Затем я возвращаю его как <div>
содержащий данные как {coins}
. Мой вопрос в том, должны ли <ul>
и <li>
быть созданы как отдельный компонент, который принимает props, который будет состоянием компонента this Coins? Кто-нибудь может помочь мне начать?
export default class Coins extends React.Component {
constructor(props) {
super(props);
this.state = {
lists: [],
error: null,
};
}
//lifecycle method to call loadCoins when Coins component is displayed?
componentDidMount() {
this.loadCoins();
}
//Data fetch from Coins API
loadCoins() {
this.setState({
error: null,
loading: true
});
return fetch(API_BASE_URL)
.then(res => {
if(!res.ok) {
return Promise.reject(res.statusText);
}
return res.json();
})
.then(coins => {
console.log('coins:', coins);
this.setState({
lists: coins.Data,
loading: false
})
}
)
.catch(err => {
this.setState({
error: 'Could not load coins',
loading: false
})
});
}
//Map the fetch data into individual cards/uls as JSX
render() {
const coins = this.state.lists.map((coin, index) => {
return <ul className='coin-containers' key={coin.CoinInfo.Id}>
<li><img className='coinImages' src={`${API_BASE_IMAGE}${coin.CoinInfo.ImageUrl}`} alt={coin.CoinInfo.FullName}/></li>
<li>{index 1}</li>
<li>{coin.CoinInfo.FullName}</li>
<li className='ticker'>{coin.CoinInfo.Name}</li>
<li>{coin.DISPLAY.USD.PRICE}</li>
<li>{coin.DISPLAY.USD.SUPPLY}</li>
<li>{coin.DISPLAY.USD.MKTCAP}</li>
<li>24HR</li>
<li>{coin.DISPLAY.USD.CHANGEPCT24HOUR}%</li>
</ul>
});
//display the new array of mapped coins data
return (
<div className='purse'>
{coins}
</div>
);
}
}
Ответ №1:
Я бы создал компонент (или функцию, если это кажется более подходящим) для отображения отдельной монеты.
Вы могли бы создать <Coin>
компонент и передать ему необходимые данные в качестве реквизитов:
render() {
return (
<div className='purse'>
{this.state.lists.map((coin, index) => <Coin data={coin} index={index} key={coin.CoinInfo.Id} />)}
</div>
);
}
Или просто переместить рендеринг монеты в новую функцию:
renderCoin(coin, index) {
return <ul className='coin-containers' key={coin.CoinInfo.Id}>
<li><img className='coinImages' src={`${API_BASE_IMAGE}${coin.CoinInfo.ImageUrl}`} alt={coin.CoinInfo.FullName}/>
</li>
<li>{index 1}</li>
<li>{coin.CoinInfo.FullName}</li>
<li className='ticker'>{coin.CoinInfo.Name}</li>
<li>{coin.DISPLAY.USD.PRICE}</li>
<li>{coin.DISPLAY.USD.SUPPLY}</li>
<li>{coin.DISPLAY.USD.MKTCAP}</li>
<li>24HR</li>
<li>{coin.DISPLAY.USD.CHANGEPCT24HOUR}%</li>
</ul>;
}
render() {
return (
<div className='purse'>
{this.state.lists.map((coin, index) => this.renderCoin(coin, index))}
</div>
);
}