Question

我在项目中使用React和Typescript。

在我的App.tsx中

setBaselineMax = () => {
    this.state.baselineDB.db.find({
      selector: {
        $and: [
          {_id: {"$gte": null}},
          {ldl: {$exists:true}},
          {hdl: {$exists:true}},
          {totalChol: {$exists:true}},
          {weight: {$exists:true}},
          {water: {$exists:true}},
          {sleep: {$exists:true}},
          {activity: {$exists:true}},
          {heartRate: {$exists:true}},
          {netCalories: {$exists:true}},
          {bloodPresure: {$exists:true}},
          {whiteCount: {$exists:true}},
          {redCount: {$exists:true}},
          {trig: {$exists:true}},
          {glucose: {$exists:true}},
          {oxygen: {$exists:true}},
          {psa: {$exists:true}},
          {alcohol: {$exists:true}},
          {createdAt: {$exists: true}}

        ]
      },
      fields: ['_id','ldl','hdl','totalChol','weight','water','sleep','activity','heartRate','netCalories','bloodPresure','whiteCount','redCount','trig','glucose','oxygen','psa', 'alcohol'],
      sort: [{'_id':'asc'}],
      limit: 1
    }).then(result => {
      console.log('baseline result');
      console.log(result);

      const newBaselineDocs = result.docs;

      console.log('this is basline data from app');
      console.log(newBaselineDocs);

      this.setState(prevState => ({
        baselineRecord: {                   // object that we want to update
            ...prevState.baselineRecord,    // keep all other key-value pairs
            ldl: newBaselineDocs[0].ldl,
            hdl: newBaselineDocs[0].hdl,
            totalChol: newBaselineDocs[0].totalChol,
            weight: newBaselineDocs[0].weight,
            water: newBaselineDocs[0].water,
            sleep: newBaselineDocs[0].sleep,
            activity: newBaselineDocs[0].activity,
            heartRate: newBaselineDocs[0].heartRate,
            netCalories: newBaselineDocs[0].netCalories,
            bloodPresure: newBaselineDocs[0].bloodPresure,
            whiteCount: newBaselineDocs[0].whiteCount,
            redCount: newBaselineDocs[0].redCount,
            trig: newBaselineDocs[0].trig,
            glucose: newBaselineDocs[0].glucose,
            oxygen: newBaselineDocs[0].oxygen,
            psa: newBaselineDocs[0].psa,
            alcohol: newBaselineDocs[0].alcohol     // update the value of specific key
        }
      }))

我的父组件中有一个数据，例如：

我的父组件Navbar组件：

 const data = {
       navData: [
         {
          title: "A",
          id: 1
         },
         {
          title: "B",
          id: 2
         }
       ],
       otherData: [
         {
          title: "A",
          id: 1
         },
         {
          title: "B",
          id: 2
         }
       ]
    }

   <Navbar data={data} />

，在我的子组件中，我将不希望获得此商品（商品为data.navData），并使用以下地图返回它们：

  type dataItems = {
     navData?: [];
  };

  interface NavBarProps {
    data: dataItems;
  }


  const NavBar: FC<NavBarProps> = ({ data }) => { 
         return (
            <Nav items={data} />
         )
      }

我不知道我是如何在父组件中定义类型的。而且我不知道在子组件中如何定义这种类型以供使用

Answer 1

这是一本好书。您可能要检查：

https://medium.com/@RupaniChirag/parent-child-communication-in-vue-angular-and-react-all-in-typescript-9a47c75cbf74

如何在React TypeScript中将数据从父级传递到子级

1 个答案: