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

}