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

你好，我是react.js的新手

我想在子组件中创建函数，并在父组件中使用它

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>}
     ...
  );

在父组件中

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

我认为传递参数在我的代码中不起作用，您能告诉我如何解决这个问题吗

---

提前感谢。

您应该将

dataVal

作为命名道具传入，但忘记在

listrep

上对其进行分解，就像

const listrep=（{dataVal）

首先，您应该将for循环移入，因为它会阻塞函数并延迟渲染

下一步了解和其他

你可以像这样解构道具

从道具获取属性

---

非常感谢！这是一个根本性的错误。。

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

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

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