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

我在书中遇到了一些示例JSX代码,这让我感到惊讶 – 它包含单个(非封闭)形式的锚标记.我简化了代码：

function CustomAnchor(props) {
    return 

该代码有效,但我无法找到任何描述这种描述JSX中锚标记的方法的文档.我预计必须使用一个开口和放大器关闭一个标签,包含props.children – 即 – 这样的东西：

返回< a {... props}> {props.children}< / a>

后一种形式实际上是如何在同一本书中提前完成的,并且没有对新的更精简的形式给出解释. FWIW,这本书是由Stoyan Stefanov撰写的“React Up& Running”.在我考虑提交一个建议来为本书添加解释之前,我会感激一些帮助.

Codepen：https://codepen.io/anon/pen/EmeOxW?editors=0010

最佳答案

JSX和React.createElement()

如果你看一下Babel Compiler,你会看到这个JSX：

function CustomAnchor() {
  return 

编译成：

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

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

createElement():

06002

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

说明

发生什么了？我们需要仔细查看源代码以了解发生了什么：

在反应库的第170行的ReactElement.js中：

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];
    }
  }
}

对于config对象中的每个值(即第二个函数参数！),我们使用propName键将它传递给props.但是,请记住,你在< a>中解构了道具.元件.

换句话说,这个：

等于：

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

摘要

总而言之,这个：

等于：

意见：

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