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
}