在React-TypeScript中传递道具

Question

我正在学习TypeScript的React，并且正在构建一个简单的杂务记录器(用户在其中输入杂务信息，然后将其记录为一个新文档)。

因此，用户输入他们的工作细节，点击submit，然后在提交时创建一个新的choreDoc对象来保存他们的所有信息。该对象还包含一个方法format()，该方法接受用户信息并将其作为字符串返回。我希望将整个对象作为一个道具传递给Document.tsx组件，然后在该组件中提取format()函数，并呈现返回的数据。我只是对如何做到这一点感到困惑，当我试图将choreDoc对象作为一个道具传递时，我得到了以下链接错误：

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

有什么办法解决这个问题吗？

输入和提取用户信息的主要父组件：App.tsx

import React, {useState} from 'react';
import Document from './Document'
import './styles.css'

interface Formatter {
  format(): string
}

class choreDoc implements Formatter  {
  name:string
  chore:string
  date:string

  constructor(n:string,c:string,d:string){
    this.name = n
    this.chore = c
    this.date = d
  }

  format(){
    return `${this.name} completed this following chore: ${this.chore} on the following date: ${this.date}`
  }
}

function App() {
  const [name, setName] = useState('')
  const [chore, setChore] = useState('')
  const [date, setDate] = useState('')
  const [document, setDocument] = useState({})

  const handleNameChange = (e:React.FormEvent<HTMLInputElement>) => {
      e.preventDefault()
      setName(e.currentTarget.value)
  }
  const handleChoreChange = (e:React.FormEvent<HTMLInputElement>) => {
      e.preventDefault()
      setChore(e.currentTarget.value)
  }
  const handleDateChange = (e:React.FormEvent<HTMLInputElement>)=> {
      e.preventDefault()
      setDate(e.currentTarget.value)
  }
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>)=> {
    e.preventDefault()
    let doc:Formatter = new choreDoc(name,chore,date)
    let arr = []
    arr.push(doc)
    setDocument(arr)
  }

  return(
    <>
      <div>
          <form className = 'input-list' onSubmit = {handleSubmit} >
              <label>
              Enter Name <br></br>
              <input type = 'text' name = 'name' onChange = {handleNameChange}></input>
              </label>
              <label>
              Chore <br></br>
              <input type = 'text' name = 'chore' onChange = {handleChoreChange}></input>
              </label>
              <label>
              Date completed <br></br>
              <input type = 'text' name = 'date' onChange = {handleDateChange}></input>
              </label>
              <div>
              <button type = 'submit' >Submit</button>
              </div>
          </form>
      </div>
      <div>
        <Document document = {document}/>
      </div>
      </>
  )
}

export default App;

要在其中呈现从format()返回的信息的Document.tsx

import React from 'react'

interface Props {
    format():string
}

const Document: React.FC<Props> = () => {
    return(
        <div className = 'doc'>
        </div>
    )
}

export default Document

Answer 1

通过将document属性作为Formatter放在Props接口中，并将document直接放入状态而不是数组中，它将按预期工作。

import React, { useState } from "react";

interface Props {
  document: Formatter;
}

const Document: React.FC<Props> = ({ document }) => {
  return <div className="doc">{document.format()}</div>;
};

interface Formatter {
  format(): string;
}

class ChoreDoc implements Formatter {
  name: string;
  chore: string;
  date: string;

  constructor(n: string, c: string, d: string) {
    this.name = n;
    this.chore = c;
    this.date = d;
  }

  format() {
    return `${this.name} completed this following chore: ${this.chore} on the following date: ${this.date}`;
  }
}

function App() {
  const [name, setName] = useState("");
  const [chore, setChore] = useState("");
  const [date, setDate] = useState("");
  const [document, setDocument] = useState<ChoreDoc | null>(null);

  const handleNameChange = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    setName(e.currentTarget.value);
  };
  const handleChoreChange = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    setChore(e.currentTarget.value);
  };
  const handleDateChange = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    setDate(e.currentTarget.value);
  };
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    let doc = new ChoreDoc(name, chore, date);

    setDocument(doc);
  };

  return (
    <>
      <div>
        <form className="input-list" onSubmit={handleSubmit}>
          <label>
            Enter Name <br></br>
            <input type="text" name="name" onChange={handleNameChange}></input>
          </label>
          <label>
            Chore <br></br>
            <input
              type="text"
              name="chore"
              onChange={handleChoreChange}
            ></input>
          </label>
          <label>
            Date completed <br></br>
            <input type="text" name="date" onChange={handleDateChange}></input>
          </label>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
      <div>{document && <Document document={document} />}</div>
    </>
  );
}

export default App;