在这种情况下如何使用 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
我学习了 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