如何從父級到子級使用功能組件？

Question

您好，我對 react.js 很陌生。

我想在子組件中創建 function 並在父組件中使用它。

在父組件中，

import ListReport from './Child';
...
  <ListReport dataval={Dfprocess} />

這是子組件。

const ListReport = (props) => {
  const dataval = props;

  const keys1 = [];
  for (const item of dataval){
    for (const var1 of Object.keys(item)){
      keys1.push(var1)
    }
  };
  ...
  return (
    ...
    {<thead>
       <tr>
         {keys1.map(key => <th key={key}>{key}</th>)}
       </tr>
     </thead>}
     ...
  );

但是，此代碼會引發錯誤

類型錯誤：dataval 不可迭代

我希望 dataval 作為列表，當我在下面的子組件中定義 dataval 時，不會有錯誤...

  const dataval = [
    {'Subject': ['100', '101', '102']},
    {'Height': [189, 200, 174]},
    {'Country': ["Japan", "US", "India"]},  
    {'Type': ["A", "B", "C"]}
  ]

我認為傳遞參數在我的代碼中不起作用，請告訴我如何解決這個問題？

提前致謝。

Answer 1

您應該將dataVal作為命名道具傳遞，但忘記在ListReport上對其進行解構，例如const ListReport = ({dataVal)

Answer 2

首先，您應該在useEffect中移動該 for 循環，因為它會阻塞 function 並延遲渲染。

接下來了解解構和其他ES6 特性

1. 你可以像這樣解構道具

const ListReport = ({dataval}) => {
  const dataval = props;

2. 從 props 中獲取屬性

const ListReport = (props) => {
  const dataval = props.dataval;