Question

在我的应用程序中，我一直在重复这样的代码：

if (prodStatus !== Product.Sold) {
  this.setState({isSold: false});
} else {
  this.setState({isStillThere: false});
}

我已经在我的组件中重复了至少10倍，我可以以某种方式将其重构为看起来更好或更类似的东西吗？

谢谢大家

欢呼

Answer 1

或者，您可以只使用 jQuery.sap.require("DragNDropDragNDrop.model.widget"); jQuery.sap.require("DragNDropDragNDrop.model.mouse"); jQuery.sap.require("DragNDropDragNDrop.model.sortable"); jQuery.sap.require("DragNDropDragNDrop.model.droppable"); jQuery.sap.require("DragNDropDragNDrop.model.draggable"); sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", 'sap/m/MessageBox'

然后，无需检查代码中的this.setState({isSold: prodStatus === Product.Sold})，只需检查this.state.isStillThere。

Answer 2

Here在React教程中，展示了一个与您正在处理的情况类似的示例情况，即状态对于子组件来说是可见的，但不应重复。

它们将所需的属性传递到子组件的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>;
}

Answer 3

您可以使用三元运算符

    prodStatus !== Product.Sold ?
 this.setState({ isSold: false }) :
 this.setState({ isStillThere: false })

更多参考文献：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

避免代码重复-reactJs-javascript

3 个答案: