Question

你好，我是 react.js 的新手。

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

在父组件中，

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 循环，因为它会阻止函数并延迟渲染。

接下来了解destructuring和其他ES6 features

你可以像这样解构道具

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

从 props 获取属性

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

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

2 个答案: