避免代码重复 - 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 {&nbsp; render() {&nbsp; &nbsp; return <div><SubComponent prodStatus={this.state.prodStatus} /></div>;&nbsp; }}或者，如果您更喜欢函数语法（我不熟悉，所以如果我犯了错误，请告诉我）：import React, { useState } from 'react';import SubComponent from 'SubComponent';// MainComponent has prodStatus in props or state.export default function MainComponent(props) {&nbsp; const [prodStatus, setProdStatus] = useState(/*prodStatus code*/);&nbsp; return <div><SubComponent prodStatus={prodStatus} /></div>;}