Question

将for / map分成两个独立组件的原因是什么？这可以成为一个吗？

Stuff.js

class Stuff extends Component {
  render() {
    if(this.props.stuffs){
     stuffItems = this.props.stuffs.map(stuff => {
      return(
      <StuffItem key={stuff.title} stuff={stuff}>
            )
      })
     }
    return (
     <div className="Stuff"> {stuffItems} </div>
    );
  }
}

Stuffitem.js

class StuffItem extends Component {
  render() {
    return (

    <li className="Stuff"> {this.props.stuff.title}</li>
    );
  }
}

Answer 1

简单; 可组合性和可重用性。您可以轻松地在Stuff组件中执行所有操作，但也许您希望能够在其他位置使用StuffItem。它还分隔列表和列表项逻辑和行为，使其更易于阅读，测试和维护。

Answer 2

关于你（或其他人）如何选择编写你的例子，没有任何内在的正确或错误......在这个特定情况下，确定，移动StuffItem的代码不会有任何损害内联。

但是，组件应该是可重用的。如果你有另一个“接受”StuffItem s作为孩子的组件，或者StuffItem可能稍微复杂一些（不同的行为取决于你提供的道具），那么将它们分开是有意义的

Answer 3

您不必将元素与其他组件分开。

当您想要封装组件的功能时，基本上要分离组件。例如，如果您的<StuffItem />组件具有某些特殊功能，则将其分开是一种很好的做法。

换句话说：分离关注

所以你可以写：

class Stuff extends Component {
    render() {
        return (
            <ul className="Stuff">
                {this.props.stuffs.map(stuff => (
                    <li className="Stuff">{stuff.title}</li>
                ))}
            </ul>
        );
    }
}

将for / map分成两个独立组件的原因是什么？

3 个答案: