React.cloneElement&Typescript

我試圖用React和Typescript制作一個儀表盤。我使用Card組件，通過React.cloneElement將子組件推入其中，并添加Card的setStates，從子組件向Card添加類和標題。現在添加的setState函式出現了一個錯誤。在例子中，我洗掉了不必要的代碼和型別，使代碼更易讀。例子：

import React, {useState}。from 'react, {useState}from 'react

function App() {
 return (
  <div> 
   <Block
    id=" users-component"
    title="用戶表"
   >
    <MyTable class=" users" />
   </Block>

   <Block
    id="status-component"/span>
    title="狀態組件"
   >
    <Status class="status" /> {/* Property 'renewTitle' is missing in type '{ class: string; }' but required in type 'Intatus' 。*/}
   </Block>/span>

   <Block
    id="bdays-component"。
    title="Bdays Component"
   >
    <Bdays class="bdays" /> {/* 'addClasses'屬性在'{ class: string; }' 型別中缺少，但在'IBDays' 型別中需要。*/}
   </Block>/span>
  </div>
  
 )
}

介面 IBlock {
    children: JSX.Element。
    id: string,
    title: string
}

function Block（props: IBlock） {
 const [classes, addClasses] = useState<string[]>([""] )
 const [title, renewTitle] = useState<string>(props.title)
 return (
  <div id={props. id} className={classes.join(" ")}> 
   <h2>{props.title}</h2> 
   {React.cloneElement(props.children, {addClasses, renewTitle})}。
  </div>/span>
 )
}

function MyTable（props） {
 return (
  <table> </table> 
)
}

介面 IStatus {
 class: string,
 renewTitle: (title: string) => void / ?
}

function Status（props: IStatus） {
 const handleClick = （title） => {
  props.renewTitle(title) //改變塊中的標題。
 }
 return (
  <div>/span>
   <button onClick={（） =>  handleClick("newTitle")}>新標題</按鈕>/span>
  </div>
)
}

介面 IBDays {
 class: string,
 addClasses: (classes: string[]) => void /?
}



function Bdays（props: IBDays） {
 const handleClick = (newClass: string) : void =>  {
  props.addClasses([newClass]) //將新的類添加到陣列 "classes "中的塊。
 }
 return (
  <div className={props.class}> /span>
   <button onClick={（） =>  handleClick("newClass")}>新類</button> 
  </div>
)
}

我怎樣才能解決這個問題？

uj5u.com熱心網友回復：

更新

你需要做一個小小的重構。TypeScript無法理解你正在克隆組件的子代。我已經改變了一些邏輯。由于允許children屬性是一個函式，我只是將所需的props傳遞給這個函式。

現在TS能夠發現props引數在{(props) => <Status class="status" {...props}里面。/>}實際上是一個有效的引數

請看注釋

import React, { useState } from 'react, { useState }

function App() {
  return (
    <div> 
      <Block
        id=" users-component"
        title="用戶表"
      >{() => <MyTable class="users" />}
      </Block>}

      <Block
        id="status-component"/span>
        title="狀態組件"
      >{(props) => <Status class="status" {...props} />}class="status" {... />}
      </Block>。

      <Block
        id="bdays-component"。
        title="Bdays Component"
      >
        {(props) => <Bdays class="bdays" {...props} /> } />}}

      </Block>。
    </div>>

  )
}

介面 IBlock {
  children: ()
    props: {
      addClasses: React.Dispatch<React.SetStateAction<string[]>> 。
      renewTitle: React.Dispatch<React.SetStateAction<string>>
    }
  ) => React.ReactNode
  id: string,
  title: string
}

const Block: React.FC<IBlock> = (props: IBlock) => /span> {
  const [classes, addClasses] = useState<string[]>([""] )
  const [title, renewTitle] = useState<string>(props.title)
  return (
    <div id={props. id} className={classes.join(" ")}> 
      <h2>{props.title}</h2> 
      {props.children({ addClasses, renewTitle })}}。
    </div>
  )
}

function MyTable(props: { class: string }) {
  return (
    <table> </table> 
  )
}

介面 IStatus {
  class: string,
  renewTitle: (title: string) => void 
}

function Status（props: IStatus） {
  const handleClick = （title: string） => {
    props.renewTitle(title)
  }
  return (
    <div> 
      <button onClick={（） =>  handleClick("newTitle")}>新標題</按鈕>/span>
    </div>
  )
}

介面 IBDays {
  class: string,
  addClasses: (classes: string[]) => void[/span
}



function Bdays（props: IBDays） {
  const handleClick = （newClass: string）。void => {
    props.addClasses([newClass])
  }
  return (
    <div className={props.class}> /span>
      <button onClick={（） =>  handleClick("newClass")}>新類</button> 
    </div>
  )
}

標籤：

上一篇：開源實時日志分析平臺-ELK

下一篇：提取jsonb欄位作為行