根据反应孩子的数量计算弹性基础

Question

我正在尝试根据孩子的数量计算flex-basis 。

 div { /** TODO: Calculate number of children / 100 */ flex-basis: ${props => 100 / React.Children.count(props.children)} %; }

现在这不起作用，关于我在这里缺少什么的任何提示？

先感谢您：-）

Answer 1

像这样工作：

 div { flex-basis: ${props => { const amountOfChildren = React.Children.count(props.children) return 100 / amountOfChildren }}%; }

Answer 2

这是一个解决方案。

import React from 'react';

const YourComponent = ({children}) => {
  const style = {
    div: {
      display: "flex",
      width: "100%",
      flexBasis: `${100/React.Children.count(children)}%`,
      justifyContent: "space-around"
    }
  }
  return <div style = {style.div}>{children}</div>
}

export default YourComponent;

代码沙盒链接

Answer 3

不确定您要在这里做什么，您不能将 flex-basis 设置为 100% 吗？

 .flex { display: flex }.child { border: 1px solid #ccc; height: 20px; padding: 10px; margin-right: 10px; flex-basis: 100%; }.child:after { content: 'child'; }

 <div class="flex"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

Answer 4

这个例子给你的结果与上面接受的纯 css 答案相同，我不明白为什么你需要用 js 计算 flex-basis，这不是 css 应该如何工作的。

 .flex { display: flex; justify-content: space-around; }

 <div class="flex"> <div>Hello</div> <div>Hi</div> <div>Bonjour</div> </div>