Как передать состояние дочернему компоненту с помощью функции React? - PullRequest
Новая
       36

Как передать состояние дочернему компоненту с помощью функции React?

0 голосов
/ 11 декабря 2019

Я пытаюсь передать загруженный файл дочернему компоненту, чтобы родительский и дочерний компоненты были основаны на функции. Я использую React, TypeScript и Material-UIРодители 

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

На данный момент я просто хочу распечатать информацию о файле, которая у меня есть {{ props }}. Я новичок в React и, пожалуйста, скажите мне, что я сделал не так. Заранее спасибо! EDIT Я изменил ребенка, 

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

, тогда он выдает ошибку, 

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

EDIT2 Следуя @EarlePoole, я изменил свой код. Parents 

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

Child 

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}'

В дочернем компоненте 

Property 'file' does not exist on type '{children?:ReactNode; }'

Ответы [ 2 ]

1 голос
/ 11 декабря 2019

В то время как вы предоставили наборы для вашего функционального компонента, вы не указали тип generic для React.FC.

. Вы должны определить интерфейс для реквизита вашего функционального компонента и предоставить его. в качестве универсального типа. 

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

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

В моем примере я использовал any, так как я не уверен, точный тип files. Вам следует избегать использования any и заменить его на соответствующий тип.

1 голос
/ 11 декабря 2019

У вашего ребенка, если вы положите {{props}} в ваш div для распечатки, он, скорее всего, даст вам [объект объекта] или что-то еще, потому что это то, что реквизит.

В ваших родителяу вас есть этот код <Child files={file: File}>. Это присваивает ваш {file: File} объект props.files в вашем дочернем компоненте, к которому затем можно получить доступ из вашего дочернего компонента, выполнив props.files.file, который возвратит элемент File.

Чтобы избежатьпутаница и избыточность Я бы порекомендовал вам изменить назначение ребенка для реквизита в родительском компоненте на <Child file={file}>.

...