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

如何解决类型“ JSX.IntrinsicElements”上不存在属性“ element”

我有这个元素（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'

我做错了什么？预先感谢。

。

解决方法

以小写字母开头的元素被认为是标准的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;
}

有关大写字母的更多信息，请参见this link