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

Question

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

function CustomAnchor(props) {
    return <a {...props}/>;
};

ReactDOM.render(
  <CustomAnchor href="http://reactjs.com">A link</CustomAnchor>,
  document.getElementById('container')
);

该代码有效,但我无法找到任何描述这种描述JSX中锚标记的方法的文档.我希望必须使用一个开启和关闭的A标签,附上props.children - 即 - 这样的东西:

return <a {...props}>{props.children}</a>

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

Codepen:https://codepen.io/anon/pen/EmeOxW ？ edit = 0010

Answer 1

JSX 和React.createElement()

如果你查看Babel 编译器，你会看到这个 JSX：

function CustomAnchor() {
  return <a {...props} />;
}

编译为：

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

createElement()根据官方文档，该函数具有以下语法：

创建元素（）：

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

所以你的观察是有道理的！人们可能会认为，既然省略了第三个参数，那么就不应该有任何children.

解释

发生什么了？人们需要仔细查看源代码才能了解发生了什么：

在ReactElement.jsreact库的第170行：

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（即第二个函数参数props！），我们将其与键一起传递propName。但是，请记住您props在<a>element中进行了解构。

换句话说，这个：

<a {...props} />

等于：

<a href="http://reactjs.com" children="A link" />

这意味着props对象同时获得 anhref和 achildren属性，这就是您获得观察到的结果的原因。

概括

总而言之，这是：

<Foo children="Bar" />

等于：

<Foo>Bar</Foo>

观点：

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