在这种情况下如何使用 useState,我无法添加带有 props 的组件

How to do useState in this case, I can't add component with props

我学习了 ReactJs 和 JavaScript 但有点卡住了

如果我这样做:

const [data, setData] = useState([]);

const addData = val => {
    setData([...data, val]);
  };

每次我 运行 addData data 将再有一个 val 合并到其中时,它都按预期工作

但是当我喜欢这样的时候:

const addData = val => {
    setData([...data, File: file={val}]);
};

File 就是这么简单:

const File = (file) => {
    const classes = useStyles();
    // do stuff
    return (
        <Return something with props file />
    );
};

export default File;

然后我得到错误我不知道如何在将 File 添加到 data

之前将 val 提供给 File

我试过 (File: File={val}) 但没有

主要问题在于 File: file={val}。您有一个对象数组,因此您应该添加一个新对象而不是 属性。为了那个原因。您需要将其添加到 {} 中。其次,在创建结构和赋值时,使用 : 而不是 =。第三 - 不要在 {} 中包围你的 val。让它成为一个简单的val。如果你想将数据传递给 val,假设它是某种组件,将它变成箭头函数并将其作为组件加载 () => <Val />。注意,它必须以大写字母开头。

根据我的理解,我做了一个和你想要的类似的demo。

import { useState } from "react";

export default function App() {
  const [data, setData] = useState([]);

  const File = ({ file }) => {
    return <div>{file}</div>;
  };

  const clickMe = () => {
    setData([...data, { File: () => <File file={"some file name"} /> }]);
  };

  return (
    <div className="App">
      <button onClick={clickMe}>Add</button>
      {data && data.map(({ File }, i) => <File key={i} />)}
    </div>
  );
}

每当您单击一个按钮时,一个名为 File 的新组件将添加到状态 data 并将传递一个属性 file 到其中。并在渲染中呈现所有数据形式 data

注意您可以使用 File: <File file={"some file name"} /> 而不是使用箭头函数 File: () => <File file={"some file name"}。但这可能会产生一些问题,并且会在将组件 File 添加到 data 时加载它,而不是在渲染中加载。因此箭头函数是更好的推荐方法。

实例:https://codesandbox.io/s/festive-sea-svhbs?file=/src/App.js:0-441