Question

我实际上在学习React和ES6。在学习的过程中，我偶然发现了我在下面提到的代码片段。

import { getBoxStyle } from './PythagorasTree.js'

export const TreeBox = (props) => {
  const style = getBoxStyle(props)
  const baseProps = Object.assign({}, props, {
    level: props.level + 1,
  })
 // What this function does 
  const leftChild =
    props.level < props.totalLevels &&
    React.createElement(TreeBox,
      Object.assign({}, baseProps, { right: false })
    )
  const rightChild =
    props.level < props.totalLevels &&
    React.createElement(TreeBox,
      Object.assign({}, baseProps, { right: true })
    )

  return React.createElement('div', { style },
    leftChild,
    rightChild
  )
}

ReactDOM.render(
  React.createElement(TreeBox, {
    level: 0,
    totalLevels: 5,
    heightFactor: 0.37,
    lean: -0.10,
    size: 100,
  }),
  document.getElementById('app')
)

我的问题是变量在下面的代码中做了什么

// What this function does 
  const leftChild =
    props.level < props.totalLevels &&
    React.createElement(TreeBox,
      Object.assign({}, baseProps, { right: false })
    )

根据代码，它应该将一些TreeBox组件返回给DOM，但我不知道是否存在循环或递归方法。我可以看到比较，但我无法找到任何递归或循环。

var i = 10;
var j = 5;
var test = function(){ j++; console.log('Hello'); } 
var hello = j < i && test();

interprit是正确的方法吗？它不是递归打印。请解释我如何解释。谢谢你的帮助。

Answer 1

如果props.level小于props.totalLevels，则创建并返回给定类型的新React元素。 type参数可以是标记名称字符串（例如'div'或'span'），React组件类型（类或函数）或React片段类型。

例如：

React.createElement(
  type,
  [props],
  [...children]
)

&&只是意味着如果之前的事情是真的那么执行之后的事情。

关于创建React组件

1 个答案: