javascript - React 自定义组件未按预期呈现

Question

我期待文本:小中、大在屏幕上呈现，但未呈现

 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 编译为下图，我不知道为什么 children 数组没有填充到 BOX 函数中。请帮忙

Answer 1

用 :

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

    return ele
  }