reactjs - 如何让 React 组件在我的示例中看起来更具可读性和简洁性？

Question

我一个月前开始使用 React。现在我正在逐步构建一个应用程序。我有我的代码，但我感觉我可以进一步清理它。

有人可以检查一下这段代码..并给我一些建议，我可以从中学习和提高我的 React 技能吗？

我的代码可以工作，但想知道这是否可以更清晰:

import React, { Component } from 'react';

import axios from 'axios';

class App extends Component {

    state = {
        fragrances: []
    }

    componentDidMount() {
    const URI = 'http://localhost:1337/';
    const post_type = 'fragrances';

        axios
        .get(`${URI + post_type}`)

        .then(response => {
            const fragrances = response.data;
            this.setState({ fragrances });
        })

        .catch(error => {
            console.log('An error occurred:', error);
        });
    }

    render() {
    const { fragrances } = this.state;
        return (
        <React.Fragment>
            <div className="row">
            {
                fragrances.map((fragrance, index) => {
                const url = 'http://localhost:1337';
                const image = fragrance.Image;
                const name = fragrance.Name;
                const category = fragrance.Category;
                const desc = fragrance.Description;
                    return (
                        <div key={index} className="col-sm-6 col-xs-12">
                            <div className="fragrance">
                                { image ? <img className="fragrance__image" src={url + image.url} alt={name} /> : <h4>Geen foto beschikbaar.</h4>}
                                { name ? <h2 className="fragrance__title">{name}</h2> : 'Geen titel aanwezig.'}
                                { category ? <span class="fragrance__category">{category}</span> : '    '}
                                { desc ? <p className="fragrance__description">{desc}</p> : 'Geen omschrijving aanwezig.'}
                            </div>
                        </div>
                    )
                })
            }
            </div>
        </React.Fragment>
        )
    }
}
export default App;

<小时/>

提前致谢。

Answer 1

创建 <Fragrance />加上使用 ES6 解构，组件会变得更加干净。还有Fragment列表中没有必要，因为它被包装在一个 <div className="row"> 中。 :

....

render() {
  const { fragrances } = this.state;
  const url = 'http://localhost:1337';

  return (
      <div className="row">
        {fragrances.map((fragrance, index) => {
           const { Image: image, Name: name, Category: category, Description: desc } = fragrance;
            return (
              <Fragrance
                key={index}
                image={image}
                name={name}
                category={category}
                desc={desc}
              />
            )
          })
        }
      </div>
    )
  }

...

Fragrance.js

const Fragance = ({name, category, image, desc }) => (
  <div key={index} className="col-sm-6 col-xs-12">
    <div className="fragrance">
      { image ? <img className="fragrance__image" src={url + image.url} alt={name} /> : <h4>Geen foto beschikbaar.</h4>}
      { name ? <h2 className="fragrance__title">{name}</h2> : 'Geen titel aanwezig.'}
      { category ? <span class="fragrance__category">{category}</span> : '    '}
      { desc ? <p className="fragrance__description">{desc}</p> : 'Geen omschrijving aanwezig.'}
     </div>
   </div>
)

export default Fragrance;