React Custom 組件未按預期呈現

Question

我期待文本：SMALL Medium，Big 在屏幕上呈現，但它沒有被呈現

 function Box(prop){
        const ele = <div className={prop.cn}>

                    </div>

        return ele
      }

      const ele = <div className="container">
                       <Box cn='small'>SMALL</Box>
                       <Box cn='medium'>Medium</Box>
                       <Box cn='medium'>BIG</Box>
                  </div>

      ReactDOM.render(ele, document.getElementById('root'));  

Babel 正在將此 JSX 編譯為下圖，我不知道為什么兒童數組沒有填充到 BOX function 中。 請幫助

Answer 1

利用：

function Box(prop){
    const ele = <div className={prop.cn}>
                     {prop.children} 
                </div>

    return ele
  }

Answer 2

您應該使用children道具為其中的 div 元素提供 Box 元素內容：

function Box({cn, children}){
  const ele = <div className={cn}>
                 {children} 
              </div>
  return ele
}