Question

import React from "react";
import PropTypes from "prop-types";

const Component = ({ children }) => <div>{children}</div>;

Component.propTypes = { children: PropTypes.object }; //what is not clear

有效。但是为什么行得通呢？由于我正在使用JavaScript，因此之前从未见过。出于好奇，我尝试了以下方法：

const fn = () => {};

fn.prop = true;

console.log(fn, fn(), "it seems like prop is not assigned");

//just to clarify for those who don't understand the question:

const obj = {};

obj.prop = true;

console.log(obj, "prop assigned to the object. fine.");

const secondFn = () => ({});

const objFromSecondFn = secondFn();

objFromSecondFn.prop = true;

console.log(objFromSecondFn, "prop assigned to the object. clear.");

console.log("comparison:", fn, obj, objFromSecondFn);

但是它似乎什么也没做。那么，这种方法可以解决什么问题，以及幕后到底发生了什么？

Answer 1

函数是对象，但是添加到函数的属性不会传递给它们返回的对象（除非在构造函数上使用原型）

const fn = () => {};
fn.prop = true;
console.log(fn.prop) // is actually set, but fn().prop is not

在您的React示例中，库代码使用您创建的Component函数，而无需运行该函数，则读取Component.propTypes来强制类型。因此，您刚刚制作了一个可调用的函数并附加了一些相关数据-创建了可在其他地方使用的接口。

Answer 2

这是es6中引入的destructuring语法。您可以在其中解压缩作为函数参数传递的对象的字段。 Example从链接文档中提取：

var user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

function userId({id}) {
  return id;
}

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}

console.log(userId(user)); // 42
console.log(whois(user));  // "jdoe is John"

我希望这个例子能使您了解幕后的情况。而且，如果您想进一步学习，那么我建议您遵循my other answer。

将属性分配给箭头功能？

2 个答案: