“JSX.IntrinsicElements”类型上不存在属性“元素”

Question

我有这个元素（registroUsuario）：

 const registroUsuario =  <div className="contenedor_central">

 <strong>Completá tus datos</strong>

 

 <IonItem>

   <IonLabel position="floating">Nombre</IonLabel>

   <IonInput ></IonInput>

 </IonItem>

 <IonItem>

   <IonLabel position="floating">Apellido</IonLabel>

   <IonInput ></IonInput>

 </IonItem>

 <IonItem>

   <IonLabel position="floating">E-mail</IonLabel>

   <IonInput></IonInput>

 </IonItem>

 <IonItem>

   <IonLabel position="floating">Clave</IonLabel>

   <IonInput ></IonInput>

 </IonItem>

</div>;

然后我想在这个类中使用那个元素：

class RegistroNuevaCuenta extends Component{

  state = {

    isActive:false

 }

 

 handleShow = ()=>{

  this.setState({

      isActive: true

  })

}

handleHide = () =>{

  this.setState({

      isActive: false

  })

}

 render(){

  

    if (this.state.isActive) {

      return (

        <registroUsuario></registroUsuario>

      );

    } else {

      return (

        <div>        

          <Boton name="Nueva cuenta de usuario" onClick={this.handleHide}></Boton>

          <Boton name="Nueva cuenta de servicio" onClick={this.handleShow}></Boton>

        </div>

     );

    }  

     }

};

但是当我尝试在以下位置使用 registroUsuario 时：

if (this.state.isActive) {

          return (

            <registroUsuario></registroUsuario>

          );

我得到：

JSX.Element 属性“registroUsuario”在类型“JSX.IntrinsicElements”上不存在

我做错了什么？提前致谢。

Answer 1

以小写字母开头的元素被假定为标准的 html 标签，例如<div>, 或<a>。对于自定义组件，您需要使用大写字母。因此，如果registroUsario要成为一个组件，您需要将其重命名为RegistroUsuario. 此外，它目前实际上不是一个组件，因为它不是一个函数（也不是一个类）。所以把它改成这样：const RegistroUsuario = () => (  <div className="contenedor_central">   <strong>Completá tus datos</strong>   <IonItem>     <IonLabel position="floating">Nombre</IonLabel>     <IonInput ></IonInput>   </IonItem>   <IonItem>     <IonLabel position="floating">Apellido</IonLabel>     <IonInput ></IonInput>   </IonItem>   <IonItem>     <IonLabel position="floating">E-mail</IonLabel>     <IonInput></IonInput>   </IonItem>   <IonItem>     <IonLabel position="floating">Clave</IonLabel>     <IonInput ></IonInput>   </IonItem>  </div>)或者，如果您是有意不创建组件的，则保留registroUsuario原样，并删除 return 语句中的 JSX 尖括号：if (this.state.isActive) {  return registroUsuario;}