输入'{ children: string;下载：未定义； }' 不可分配给类型 'IntrinsicAttributes & { downloadPageLink: any; }'

Question

我正在开发一个简单的 React 应用程序，您可以在其中共享文件。因此，当我上传文件时，它会返回到数据库并创建一个 secure_Url 并将其显示在前端。即downloadPageLink。我不知道为什么在我将文件导入 index.tsx

时抛出此错误

这是我的index.tsx

import DropZoneComponent from "@components/DropZoneComponent";
import {useState} from "react";
import RenderFile from "@components/RenderFile";
import axios from "axios";
import DownloadFile from "../components/DownloadFile";

export default function Home() {
    const [file, setFile] = useState(null)
    const [id, setId] = useState(null)
    const [downloadPageLink, setDownloadPageLink] = useState()
    const [uploadState, setUploadState] = useState<"Uploading" | "Upload Failed" | "Uploaded" | "Upload">("Upload")

    const handleUpload = async () => {
        if (uploadState === "Uploading") return;
        setUploadState("Uploading")

        const formData = new FormData();
        formData.append("myFile", file)
        try {
            const {data} = await axios({
                method: "POST",
                data: formData,
                url: "api/files/upload",
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            });
            setDownloadPageLink(data.downloadPageLink);
            setId(data.id);
        } catch (error) {
            console.log(error.response.data)
            setUploadState("Upload Failed")
        }
    }
    return (
        <div className="flex flex-col items-center justify-center">
            <h1 className="my-4 text-2xl font-weight-medium font-body tracking-wide">Got a file? Lezz share it!</h1>
            <div className="w-96 h-auto flex flex-col items-center bg-gray-800 shadow-xl rounded-xl justify-center">
                {!downloadPageLink && <DropZoneComponent setFile={setFile}/>}
                {file &&
                <RenderFile file={{
                    format: file.type.split("/")[1],
                    name: file.name,
                    sizeInByte: file.size,
                }}
                />
                }
                <button className="w-36 bg-gray-900 rounded-md h-10 mb-6 focus:outline-none font-body tracking-wider transition duration-500 ease-in-out transform hover:-translate-y-0 hover:scale-110 "
                        onClick={handleUpload}>{uploadState}</button>
                {
                    downloadPageLink &&
                    <DownloadFile download={downloadPageLink} >
                        Email form
                    </DownloadFile>
                }
            </div>
        </div>
    )
}

这是我的 DownloadFile.tsx

 const DownloadFile = ({downloadPageLink}) => {
    return (
        <div className="p-1">
            <h1 className="my-2 text-lg font-medium font-body">
                Yo
            </h1>
            <div className="flex space-x-3">
                <span className="break-all">{downloadPageLink}</span>
                <img src="/images/copy.png" alt="" className="w-8 h-8 object-contain cursor-pointer"/>
            </div>

        </div>
    )
}

 export default DownloadFile

我的_app.tsx

import "tailwindcss/tailwind.css";
import "../../styles/globals.css";
import axios from "axios";


axios.defaults.baseURL = "http://localhost:8000/"

function MyApp({ Component, pageProps }) {
  return (
      <div className="grid h-screen font-serif text-white bg-gray-900 place-items-center">
        <Component {...pageProps} />
      </div>
  )
}

export default MyApp;

我的package.json

{
  "name": "save-walter-x",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-dropzone": "^11.3.4"
  },
  "devDependencies": {
    "@tailwindcss/jit": "^0.1.18",
    "@types/react": "^17.0.3",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.9",
    "tailwindcss": "^2.1.1",
    "typescript": "^4.2.4"
  }
}

当我将 DownloadFile.tsx 导入 index.tsx

时，我在 index.tsx 遇到了这个问题

我做错了什么，为什么打字稿表现得很奇怪？我是新手。

提前致谢:)

Answer 1

在index.ts你正在使用

<DownloadFile download={downloadPageLink} >

DownloadFile 的 prop 的名字叫做 download

DownloadFile 的定义有参数const DownloadFile = ({downloadPageLink})（不是下载）

我特别使用 props 作为参数，因为你可以有多个，或者你可以使用 {} 拆分它们，但你需要使用相同的名称

那么使用props的代码就是

const DownloadFile = (props) => {
..
                <span className="break-all">{props.download}</span>

或者你可以保持原样

const DownloadFile = ({download}) => {
    ..
                    <span className="break-all">{download}</span>

Answer 2

在 DownloadFile 组件中，您明确提到了唯一预期的道具 downloadPageLink。有两个错误。

在 index.tsx 中，您发送的道具是 download。它应该是 downloadPageLink 像下面的片段。

<DownloadFile downloadPageLink={downloadPageLink} >
                        Email form
                    </DownloadFile>

您没有在 DownloadFile 组件中使用子项。删除子项或在 DownloadFile 组件中使用子项。而不是这个

<DownloadFile downloadPageLink={downloadPageLink} >
                        Email form
                    </DownloadFile>

应该是这样的

<DownloadFile downloadPageLink={downloadPageLink} />

输入'{ children: string;下载：未定义； }' 不可分配给类型 'IntrinsicAttributes & { downloadPageLink: any; }'

Type '{ children: string; download: undefined; }' is not assignable to type 'IntrinsicAttributes & { downloadPageLink: any; }'

typescript

reactjs

axios

react-proptypes

react-props

输入'{ children: string;下载：未定义； }' 不可分配给类型 'IntrinsicAttributes &amp; { downloadPageLink: any; }'

Type '{ children: string; download: undefined; }' is not assignable to type 'IntrinsicAttributes &amp; { downloadPageLink: any; }'

typescript

reactjs

axios

react-proptypes

react-props

输入'{ children: string;下载：未定义； }' 不可分配给类型 'IntrinsicAttributes & { downloadPageLink: any; }'

Type '{ children: string; download: undefined; }' is not assignable to type 'IntrinsicAttributes & { downloadPageLink: any; }'