在 React 中查找可在外部组件的 props 中使用的参数

Question

App.js

export default function App() {


const handleClick=(data1,data2)=>{
    console.log(data1,data2).  ----> output: Hello world This is a sentence 
}
 
  return (
    <div className="App">
      <TestBox onClick={handleClick}  />
    </div>
  );
}

TestBox.js

export function TestBox(props) {
  return (
    <div
      onClick={() => props.onClick("Hello world", "This is a sentence")}
      style={{ height: "100px", width: "100px", border: "1px solid black" }}
    >
      <h1>Hello</h1>
    </div>
  );
}

上面示例的Codesandbox

主要问题

假设我没有阅读 TestBox.js 中的源代码，如何找出 TestBox.js 为我的函数提供了 2 个参数（data1 和 data2）？

更多背景

我在使用第三方库时经常遇到这个问题，例如，

Rechart.JS

的documentation指定我可以调用

onMouseEnter

函数，但它没有指定我可以访问

data 

参数。因此，我什至不知道我可以访问“数据”，直到我尝试像下面这样打印它。于是，我就有了上面的问题。

<LineChart width={730} height={250} data={data} onMouseEnter={(data)=>console.log(data)}  >
//omitted
</LineChart>

Answer 1

我喜欢做的是，我尝试使用尽可能多的参数来测试一个函数，然后在 console.log 中记录它们：

unknownFunction(a,b,c,d,e) => console.log(a,b,c,d,e);

• 查看控制台了解数据结构
• 查看未定义的值，了解该函数有多少个参数：例如，您传递了 5 个参数 a、b、c、d 和 e。您会看到 a 和 b 的值，但 c、d 和 e 未定义。那么你就知道这个函数只需要两个参数。

我也尝试查看文档并尝试在那里找到更多信息。

您也可以尝试导入该函数，并希望 IDE 向您显示更多信息（即注释、propTypes、@types 注释等）。

最后，您始终可以在源代码中查找函数签名。