Question

我尝试将上传的文件传递给父组件和子组件都是基于功能的子组件。
我正在使用React，TypeScript和Material-UI

父母

AS EXTERNAL NAME Get_API_Data.[StoredProcedures].GetAPI

孩子

import React from 'react';
import Child from './Child';

const Parent:React.FC =() => {
  const [file, setFile] = React.useState(null);
  const onChangeFile = (e:any) => {
    setFile(e!.target.files[0]);
  }
  return(
    <div>
    <input
      accept="*.*"
      onChange={onChangeFile}
      id="uploadFile"
      type="file" />
    <Button
      onClick={() => document.getElementById('uploadFile')!.click()}
      component='span'>
      Upload file
    </Button>
    <Child files={file: File}>
    </div>

这时，我只想打印出我拥有import React from 'react'; const Child:React.FC = (props) => { return( <div> {{ props }} </div> ) } export default Child的文件信息。我是React的新手，请告诉我我做错了什么。提前谢谢！
编辑
我换了孩子，

{{ props }}

然后抛出错误，

const Child:React.FC = ({files}) => {
  return(
    <div>
      { files }
    </div>
  )
}

EDIT2 继@EarlePoole之后，我更改了代码。
父母

property 'files' does not exist on type '{children?:ReactNode; }'

孩子

const Parent:React.FC = () => {
 //...
 <Child file={file} />

在父组件中，出现此错误

const Child:React.FC =(props) => {
  return(
  <div>
    {props.file.file}
  </div>
  )
}

在子组件中，

Type '{ file: any; } is not assignable to type 'IntrinsicAttributes & {children ?:ReactNode; }'. Property 'file' does not exist on type 'IntrinsicAttributes & { children?: ReactNode}'

Answer 1

在您的孩子中，如果您将{{props}}放在div中以进行打印，它很可能会给您[object Object]或其他东西，因为那是道具。

在您的父母中，您有此代码<Child files={file: File}>。这会将您的{file: File}对象分配给您的Child组件中的props.files，然后可以通过执行props.files.file返回File项目，从您的Child组件内部对其进行访问。

为避免混乱和多余，我建议您将“父级”组件中的“子道具”分配更改为<Child file={file}>。

Answer 2

虽然确实提供了功能组件的类型，但没有为generic指定React.FC类型。

您应该为功能组件的props定义一个接口，并将其作为通用类型提供。

interface ChildProps {
  files: any; // try not to use any.  
}

const Child:React.FC<ChildProps> = ({files}) => {
  return(
    <div>
      { files }
    </div>
  )
}

在我的示例中，我使用any，因为不确定files的确切类型。您应该避免使用any，而应将其替换为相应的类型。

如何通过基于函数的React将状态传递给子组件？

2 个答案: