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属性,这就是您获得观察结果的原因.

摘要

总而言之,这个：

等于：

意见：

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

原文地址：https://www.jb51.cc/js/429166.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。