“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;
}

有关组件大小写的更多信息，请参阅this link