在 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 of the example above

主要问题

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

更多上下文

我在使用第三方库时经常遇到这个问题，例如，Rechart.JS 的 documentation 指定我可以调用 onMouseEnter 函数，但它没有指定我可以访问 data 参数。因此，在我尝试像下面那样打印之前，我什至不知道我可以访问 '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 注释等）。

最后，您总能在源代码中查找函数签名。

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

Finding the parameters that can be used in an external component's props in React

javascript

reactjs