我在书中遇到了一些示例JSX代码,这让我感到惊讶 – 它包含单个(非封闭)形式的锚标记.我简化了代码：
function CustomAnchor(props) {
return 该代码有效,但我无法找到任何描述这种描述JSX中锚标记的方法的文档.我预计必须使用一个开口和放大器关闭一个标签,包含props.children – 即 – 这样的东西：
返回< a {... props}> {props.children}< / a>
后一种形式实际上是如何在同一本书中提前完成的,并且没有对新的更精简的形式给出解释. FWIW,这本书是由Stoyan Stefanov撰写的“React Up& Running”.在我考虑提交一个建议来为本书添加解释之前,我会感激一些帮助.
最佳答案
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属性,这就是您获得观察结果的原因.
总而言之,这个：
等于：
意见：
话虽这么说,我宁愿看到作者使用你建议的语法,而不是他/她做的方式.人们期望教育材料更加清晰和准确.
