javascript – 传递元素子元素的未记录方法:作为属性而不是显式子元素

前端之家收集整理的这篇文章主要介绍了javascript – 传递元素子元素的未记录方法:作为属性而不是显式子元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最佳答案
JSX和React.createElement()

@H_404_1@如果你看一下Babel Compiler,你会看到这个JSX:

@H_404_1@

function CustomAnchor() {
  return 

编译成:

function CustomAnchor() {
  return React.createElement("a",props);
}

createElement()函数具有以下语法,根据official documentation

@H_404_1@

@H_404_1@createElement():

@H_404_1@06002

@H_404_1@所以你的观察是有道理的!人们会认为,由于省略了第3个参数,因此不应该有任何子项.

@H_404_1@说明

@H_404_1@发生什么了?我们需要仔细查看源代码以了解发生了什么:

@H_404_1@在反应库的第170行的ReactElement.js中:

@H_404_1@

ReactElement.createElement = function (type,config,children) {
  var propName;

  // Reserved names are extracted
  var props = {};

  ........

  for (propName in config) {
    if (hasOwnProperty.call(config,propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName];
    }
  }
}
@H_404_1@对于config对象中的每个值(即第二个函数参数!),我们使用propName键将它传递给props.但是,请记住,你在< a>中解构了道具.元件.

@H_404_1@换句话说,这个:

@H_404_1@

@H_404_1@等于:

@H_404_1@

@H_404_1@这意味着props对象同时获得href和children属性,这就是您获得观察结果的原因.

@H_404_1@摘要

@H_404_1@总而言之,这个:

@H_404_1@

@H_404_1@等于:

@H_404_1@

@H_404_1@意见:

@H_404_1@话虽这么说,我宁愿看到作者使用你建议的语法,而不是他/她做的方式.人们期望教育材料更加清晰和准确.

猜你在找的JavaScript相关文章