根據反應孩子的數量計算彈性基礎

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>