避免代码重复 - reactJs - javascript

Question

在我的应用程序中，我一直在重复这样的代码：if (prodStatus !== Product.Sold) {  this.setState({isSold: false});} else {  this.setState({isStillThere: false});}我已经在我的组件中重复了至少 10 倍，我可以以某种方式将它重构为看起来更漂亮或类似的东西吗？

Answer 1

或者，你可以使用 this.setState({isSold: prodStatus === Product.Sold})

然后不要检查this.state.isStillThere您的代码，只需检查!this.state.isSold.

Answer 2

这里的教程做出反应，他们展示类似于你正在处理什么用一个例子的情况下，即，状态需要为子组件中可见，但不应该被重复。

他们将所需的属性传递给props子组件的 ，这通常是（根据我的经验）需要传递的属性。

下面是一些示例代码：

import React from 'react';

import SubComponent from 'SubComponent';

// MainComponent has prodStatus in props or state.

export default class MainComponent extends React.Component {

  render() {

    return <div><SubComponent prodStatus={this.state.prodStatus} /></div>;

  }

}

或者，如果您更喜欢函数语法（我不熟悉，所以如果我犯了错误，请告诉我）：

import React, { useState } from 'react';

import SubComponent from 'SubComponent';

// MainComponent has prodStatus in props or state.

export default function MainComponent(props) {

  const [prodStatus, setProdStatus] = useState(/*prodStatus code*/);

  return <div><SubComponent prodStatus={prodStatus} /></div>;

}