如何从父级到子级使用功能组件？

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;