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

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

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
}

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

React Custom component is not getting rendered as expected

javascript

jsx

reactjs

babeljs