Question

我对React和OOD相当新，所以请耐心等待。理想情况下，我想以这样一种方式编写我的应用程序，以便很容易推理和扩展。相反，尽可能使我的代码成为S.O.L.I.D。我也担心测试我的组件，因为我也是TDD的新手。

例如，我已经尝试过编写与此类似的代码：

App.jsx - 首次试用

// all other code omitted

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      roundScore: 0, 
      lives: 1,
      modal: true, 
    };
  }

  render() {
    return (
      <div className="App">
        <Header 
          modal={this.state.modal} 
          lives={this.state.lives} 
          score={this.state.score} 
        />
      </div>
      );
  }
}

Header.jsx - 初审

const Header = function(props) {
  if (props.modal) {
    return (<Logo logo={logo} />);
  } else {
    return (
      <div>
        <Lives lives={props.lives} />
        <Score score={props.score} />
      </div>
      );
  }
};

const Logo = function(props) {
  return (
    <div>
      <img
        src={props.logo}
        className="logo logo--xs"
        alt="logo"
      />
    </div>
    );
};

const Score = function(props) {
  const text = (props.text ? <strong>{props.text}</strong> : '');
  return (
    <p className={props.styles}>
      {text}
      {props.score} pts
    </p>
    );
};

const Lives = function(props) {
  return (
    <p className="lives lives--left">
      Lives:
      {props.lives}
    </p>
    );
};

export default Header;

我最初设置这样的代码的原因是因为我有很多组件和 App.jsx 文件，并想把它们中的一部分拉出来并将它们嵌套在像{{{}这样的包装器组件中。 1}}。

我开始用Jest和Enzyme为上面提到的一些单元测试，并发现我在单独测试某些组件时遇到了一些困难。例如，测试<Header /> <Body /> <Footer />组件证明是困难的，除非我将导出语句更改为<Score />之类的内容，但这似乎不应该只是用于测试？

最重要的是，我有一些export { Header, Scores, Lives, Logo };这些组件需要这么浅，呈现propTypes组件然后将道具传递给<Header />只是为了避免我的控制台中的警告没有＆对我来说似乎是对的。

因此，我将代码修改为以下内容：

App.jsx - 第二次试用

<Score />

Header.jsx - 第二次试用

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      roundScore: 0, 
      lives: 1,
      modal: true, 
    };
  }

  render() {
    return (
      <div className="App">
        <Logo modal={this.state.modal} logo={logo} />
        <Lives modal={this.state.modal} lives={this.state.lives} />
        <Score modal={this.state.modal} score={this.state.roundScore} />
      </div>
      );
  }
}

我已经发现这个设置更容易测试，但现在我有一些顾虑：

根据应用程序状态使用CSS隐藏组件是否可以？我会接受任何演出？
我有几个其他的父/包装器组件，它们根据状态有条件地呈现子组件，我觉得重写很多它们将非常困难（但并非不可能）。我应该打扰或接受我的错误，并在下次避免这种情况吗？
最后，我很想知道有条件渲染子组件是否违反单一责任原则？

请不要将此标记为引发讨论或意见的问题。我做了我的研究;我已经阅读了3本关于React的书籍，参加了一个在线课程并阅读了几篇文章和风格指南，但我仍然难以理解如何最好地构建反应应用程序。很高兴听到一些经验丰富的社区成员。

条件呈现是否会使子组件违反SRP？

0 个答案: