Question

我有一个容器组件，它将一组对象传递给一个表示组件来输出。

在表示组件中，我需要显示满足特定条件的多个这些对象的计数。最佳做法是在容器组件中执行计数并将其传递给表示组件，还是可以在表示组件中进行计数。

即：

export class ResultsPage extends React.Component {

  constructor(props){
    super(props);
  }

  countSexyObjects(){
    const matching = this.props.allObjects.filter((obj)=>{
      return obj.sexy === true;
    });

    return matching.length
  }

  render(){
    return (
        <PresentationalComponent  allObjects={this.props.allObjects}
                                  numberOfSexyObjects={this.countSexyObjects()} />
    );
  }
}


let PresentationalComponent = (props) => {

  return (
    <div>
      There are {props.numberOfSexyObjects} sexy objects
    </div>
  );
};

OR

export class ResultsPage extends React.Component {

  constructor(props){
    super(props);
  }

  render(){
    return (
        <PresentationalComponent allObjects={this.props.allObjects} />
    );
  }
}


let PresentationalComponent = (props) => {

  const countSexyObjects = () => {
    const matching = this.props.allObjects.filter((obj)=>{
          return obj.sexy === true;
        });

    return matching.length
  };

  return (
    <div>
      There are {countSexyObjects()} sexy objects
    </div>
  );
};

Answer 1

我会使用第一种格式，原因如下：

智能组件应该更好地了解＆＃34; SexyObject＆＃34;是。如果它是对象中的一个字段，那很简单并且无论如何都可以争论。如果它依赖于Web服务或一些更复杂的逻辑来确定它是否性感，那么您在表示层中永远不会想要它。简单有一种变得复杂的方式，所以我最初使用支持复杂性的结构。
使用智能组件中的逻辑测试代码会更简单。您可以填充组件，然后检查固定数据集中的输出变量。
如果符合＆＃34; SexyObject＆＃34;如果您将选择逻辑分开，则可以通过组件进行更改，您将保留重用表示组件的能力。

只需我0.02美元

Answer 2

理想情况下，国家被认为是反应中的邪恶。我知道React建立在状态的概念之上，但更少的状态是更优选的，这意味着尝试用大多数纯粹的函数来构造代码。

你的第一个例子中的恕我直言更正确。 ResultsPage是您的容器组件（智能组件），而另一个是愚蠢的。 Dumb组件不管理状态，只关注UI的外观。您可以将所有html，bootstrap逻辑放在那里。

这种模式好的原因是因为我们现在想要从XHR调用中获取匹配条件，第二种情况下的代码将是

export class ResultsPage extends React.Component {

  constructor(props){
    super(props);
  }

  getSexyMatcher() {
    /* make ajax call here */
    return results;
  }

  render(){
    return (
        <PresentationalComponent allObjects={this.props.allObjects} sexyMatcher={getSexyMatcher()}/>
    );
  }
}


let PresentationalComponent = (props) => {

  const countSexyObjects = () => {
    const matching = this.props.allObjects.filter((obj)=>{
          return obj.sexy.match(props.sexyMatcher)
          // return obj.sexy === true;
        });

    return matching.length
  };

  return (
    <div>
      There are {countSexyObjects()} sexy objects
    </div>
  );
};

请注意您必须为同一业务逻辑更改两个组件？更糟糕的是，如果其他人在代码库中的其他地方使用PresentationalComponent该怎么办？在第一种情况下，事情要简单得多。只需在智能组件中添加ajax函数，并将结果传递给UI组件。

React：在Container或Presentational组件中放入简单的逻辑？

2 个答案: