Reactjs 从我的示例中，如何使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;

import React，{Component}来自'React'；
从“axios”导入axios；
类应用程序扩展组件{
状态={
香水：[]
}
componentDidMount（）{
常量URI=http://localhost:1337/';
const post_type=‘香水’；
axios
.get（`${URI+post\u type}`）
。然后（响应=>{
常量香水=响应数据；
这个.setState（{fragrances}）；
})
.catch（错误=>{
log（'发生错误：'，错误）；
});
}
render（）{
const{fragrances}=this.state；
返回(
{
香水。地图（（香水，指数）=>{
常量url=http://localhost:1337';
const image=freasure.image；
const name=香水名称；
const category=香水。类别；
const desc=香水。描述；
返回(
{图片？：Geen foto beschikbaar.}
{name？{name}:'Geen titel aanwezig.}
{category？{category}:''}
{desc？
{desc}
：“Geen omschrijving aanwezig.”
)
})
}
)
}
}
导出默认应用程序；

---

---

提前感谢。

我建议您执行“重新格式化代码”。据我所知，大多数Intellij IDE都有这样的功能，可以通过按CTRL+ALT+L来实现

---

这与（严格的）linter（ESLint）一起可以产生清晰的整体结构，从而提高可读性。

您的代码观察：

• componentDidMount（）中的代码可以移动到某个中心位置，就像某个单独的组件导出这些代码一样，所有的axios代码都驻留在那里
• 始终尝试将组件拆分为更小且易于管理的部分，这样可以提高可读性并使其更易于管理
• 对代码进行格式化使您的所有代码都位于可视区域，我们不应该水平滚动以查看正在运行的代码
• 您的
  内部代码的可读性可以得到提高，如下所示，请始终保持干净，这样可以更好地阅读

  const { fragrances } = this.state;
  const image = <img className="fragrance__image" src={url + image.url} alt={name} />;
  const name = <h2 className="fragrance__title">{name}</h2>;
  const category = <span class="fragrance__category">{category}</span>;
  const desc = <p className="fragrance__description">{desc}</p>;
  
  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 ? {image} : <h4>Geen foto beschikbaar.</h4>}
                          { name ? {name} : 'Geen titel aanwezig.'}
                          { category ? {category}  : '    '}
                          { desc ? {desc}  : 'Geen omschrijving aanwezig.'}
                      </div>
                  </div>
              )
          })
      }
      </div>
  </React.Fragment>
  )
  

  const{fragrances}=this.state；
  常量图像=；
  const name={name}；
  const category={category}；
  const desc=
  {desc}
  ；
  返回(
  {
  香水。地图（（香水，指数）=>{
  常量url=http://localhost:1337';
  const image=freasure.image；
  const name=香水名称；
  const category=香水。类别；
  const desc=香水。描述；
  返回(
  {图像{图像}：吉恩·福托·贝希克巴。}
  {name？{name}:'Geen titel aanwezig.}
  {category？{category}:''}
  {desc？{desc}:'Geen omschrijving aanwezig.}
  )
  })
  }
  )
  

• 请不要在地图中使用索引，它会导致不可预测的应用程序，请阅读本文

• 考虑使用HOC（高阶组件）

• 使用CSS模块避免CSS冲突

//conatnsts.js
导出常量URI=http://localhost:1337/';
导出常量URL=http://localhost:1337';
出口const POST_TYPE=‘香水’；
//App.js
从“React”导入React，{Component}；
从“axios”导入axios；
从“/constants.js”导入{URI，URL，POST_TYPE}；
类应用程序扩展组件{
状态={
香精：[]，
};
componentDidMount（）{
axios
.get（`${URI+post\u type}`）
。然后（响应=>{
常量香水=响应数据；
这个.setState（{fragrances}）；
})
.catch（错误=>{
log（'发生错误：'，错误）；
});
}
render（）{
const{fragrances}=this.state；
返回(
{
map（{Image:Image，Name:Name，Category:Category，Description:desc}，index）=>(
{图片？：Geen foto beschikbaar.}
{name？{name}:'Geen titel aanwezig.}
{category？{category}:''}
{desc？
{desc}
：“Geen omschrijving aanwezig.”
)
)
}
)
}
}
导出默认应用程序；

我添加了一些细微的更改，但为了保持代码的干净性和可读性，React-write组件仅用于它应该服务的目的。组件不应该考虑如何渲染图像、类别或描述。相反，您应该有一个组件smth，如

FragranceListItem

。此组件（应用程序组件）是

FragranceList

。因此，您的

FragranceList

组件呈现

FragranceList

s。在

FragranceList项目中

您可以拥有

FragranceImage

，

FragranceName// conatnsts.js
export const URI = 'http://localhost:1337/';
export const URL = 'http://localhost:1337';
export const POST_TYPE = 'fragrances';


// App.js
import React, { Component } from 'react';
import axios from 'axios';
import { URI, URL, POST_TYPE } from './constants.js';

class App extends Component {

    state = {
        fragrances: [],
    };

    componentDidMount() {
        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 (
        <>
          <div className="row">
            {
                fragrances.map(({ Image: image, Name: name, Category: category, Description: desc}, index) => (
                  <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>
        </>
        )
    }
}
export default App;

....

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>
    )
  }

...

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;