功能在反应中的位置

Question

我正在关注反应教程。我遇到了以下代码

 const square = React.createElement('div', {
  style: {
    width: '100px',
    height: '100px',
    backgroundColor: 'red',
    margin: '10px',
  }
})

const container = React.createElement(
  // The first argument specifies the element's type
  'div',

  // The second argument specifies the element's attributes, or "props"
  { style: { border: '5px solid blue' } },

  // The remaining arguments list the element's children
  square,
  square
)

ReactDOM.render(container, document.getElementById('app'))

我知道反应dom将获取app元素并呈现＆＃39;容器＆＃39;内在的元素。 Inturn容器元素调用square元素，一切正常。当我尝试将另一个元素添加到sqaure元素时，它不会渲染。代码如下

const square = React.createElement('div', {
  style: {
    width: '100px',
    height: '100px',
    backgroundColor: 'red',
    margin: '10px',
  }
}, smallsquare)

const smallsquare = React.createElement('div', {
  style: {
    width: '50px',
    height: '50px',
    backgroundColor: 'green',
    margin: '10px',
  }
})

Plunkr：Plunkr template

注意：我通过替换函数的位置及其工作

再次尝试

请帮助我理解我所缺少的东西