reactjs 网格中的引导卡答案

【问题标题】：reactjs Bootstrap Cards in gridreactjs 网格中的引导卡
【发布时间】：2020-01-31 06:56:33
【问题描述】：

所以我想根据玩家数量实现引导卡类型的动态渲染。 4 名玩家应该被渲染为一个在另一个之下。但是当我击中第 5 名玩家时，我希望牌张分成两列。

我将如何实现这一目标？

卡片本身及其对应的实体将选择 100% 宽度的包装容器。因此，只要只有 4 个玩家，卡片就会占用 100% 的宽度。

非常感谢。

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案1】：

我不会编写整个解决方案的代码，但我肯定可以为您提供一种架构模式，您可以按照它来构建您的解决方案。

class PlayersView extends React.Component {

  buildFewPlayersGrid = () => {
    ... create gridprops based on logic ...
    return <SmallGrid {...gridprops} />
  };

  buildLotsOfPlayersGrid = () => {
    ... create gridprops based on logic ...
    return <TheBigGrid {...gridprops} />
  };

  render() {
    if (this.props.players.length < 5) {
      return this.buildFewPlayersGrid();
    }
    return this.buildLotsOfPlayersGrid();
  }

}

让我们在这里注意一些事情，只有当您需要以某种方式创建这些视图时，我才会推荐这些函数，这样您就无法将每个 Grid 与其自己的组件分开导入。如果你能以不同的方式做，那么我会推荐......

class PlayersView extends React.Component {
  render() {
    if (this.props.players.length < 5) {
      return <SmallGrid players={this.props.players} />;
    }
    return <TheBigGrid players={this.props.players} />;
  }
}

希望这对您有所帮助，因此要回答您的问题，您可以从组件化和将代码拆分成这样的几个组件中受益。

【讨论】：

感谢您到目前为止的回答。我明白你在说什么，这样它肯定会奏效。不过，我认为更多的是 css / scss 方法。我在想可能有可能使用引导 css 选项动态渲染网格。但经过研究，我没有找到任何东西，并希望有人能更多地了解 CSS 和引导程序。但如果是这样，我将很乐意接受您的架构建议并以这种方式解决挑战。
在引导程序中，您需要将类添加到“html”元素，因为您使用的是引导程序的反应版本，您可以从组件化中受益。并且动态地添加每个元素在每种情况下都需要的网格类。你不能用纯 CSS 做到这一点。