React类型记录组件中的IntrinsicAttributes道具

Question

你好，我有这样的消息通知：

类型'{子:字符串；通知:字符串；}‘不能分配给'IntrinsicAttributes &{ notify: any；}’。'IntrinsicAttributes &{ notify: any；}'.ts(2322)中不存在属性‘子属性’

使用卡片组件。这是我第一次明白。

这是构成部分：

const Card = (props:{notify:any}) => {
 
  if (props.notify.length> 0> 0){
    return <IonIcon icon={notifications}  id="iconoHomeCampana">  </IonIcon>

  }else{
    return <IonIcon icon={notificationsOff}  id="iconoHomeCampana">  </IonIcon>
  }
}


export interface newMessage{
  de:string
  ticket:string
}

const App= () => {

  const [notifications, setNotifications] =  useState < newMessage []> ( [])

  useEffect(() => {

  axios.get(url+"chatsinleer/"+props.email).then((resp: { data: any; }) => {
      if (resp.data!="bad"){
        setNotifications(resp.data.map((d: { de: any; ticket: any; }) => ({
          de:d.de,
          ticket:d.ticket,
          })));
      }
    })

  }, []);

return (
      <IonPage >
        <IonHeader>
          <IonToolbar>
            <IonGrid>
              <IonRow id="header">
                <IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
                <IonCol id="columna2" ><Busqueda categorias={categorias} setCategorias={setCategorias} setProveedorBuscadoHook={setProveedorBuscadoHook} setBuscar={setBuscar} /></IonCol>
                <IonCol id="columna3" size="1.5"> 
                  <Card notify={notifications}>  </Card>
                </IonCol>
              </IonRow>
            </IonGrid>
          </IonToolbar>
        </IonHeader>
    )
}

Answer 1

您需要删除<Card notify={notifications}> </Card>内部的空间

然后像<Card notify={notifications}></Card>一样使用它，或者像这样更好地使用：

<Card notify={notifications}/>

问题在于，将空间视为儿童要素的反应；

下面是简单的repro，它也产生了同样的错误：

const Comp1 = ({ a }: { a: boolean }) => {
  return null;
};

const Comp2 = () => {
  return <Comp1 a={true}> </Comp1>;
};

Answer 2

答案：

<Card> </Card>与<Card>{" "}</Card>相同，这意味着您要作为该组件的子组件发送一个空间。将其替换为<Card {...props} />，这将解决您的问题，因为没有子节点。

解释：

JSX文档：

JSX删除一行开头和结尾处的空格。它还删除空行。移除与标记相邻的新行；出现在字符串文本中间的新行被浓缩为单个空格。

和本期。

基本上，在JSX中，空间被认为是有意义的，所以在不需要的时候避免空间是一个很好的实践。

更书呆子的东西：

JSX.IntrinsicAttributes --它是一个接口，允许您全局扩展JSX节点的属性，例如，React中的key。

React不包括children支柱在IntrinsicAttributes中，所以当组件需要呈现子组件时，必须显式地将其添加到道具类型定义中。

这里有更多的信息

Answer 3

在这里，伙计

interface ISetAuth {
  setAuth: Dispatch<SetStateAction<boolean>>;
}

const Login = ({ setAuth }: ISetAuth) => {

}

我挣扎了40分钟.*‘)