我实际上在学习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是正确的方法吗?它不是递归打印。请解释我如何解释。 谢谢你的帮助。
答案 0 :(得分:0)
如果props.level
小于props.totalLevels
,则创建并返回给定类型的新React元素。 type参数可以是标记名称字符串(例如'div'或'span'),React组件类型(类或函数)或React片段类型。
例如:
React.createElement(
type,
[props],
[...children]
)
&&
只是意味着如果之前的事情是真的那么执行之后的事情。