属性 'element' 在类型 '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:

中使用那个元素

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 Property 'registroUsuario' does not exist on type 'JSX.IntrinsicElements'

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

.

Answer 1

以小写字母开头的元素被假定为标准 html 标签，例如 <div> 或 <a>。自定义组件需要大写。

因此，如果 registroUsario 是一个组件，您需要将其重命名为 RegistroUsuario。此外，它目前实际上不是组件，因为它不是函数（也不是 class）。所以把它改成这样：

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

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

Property 'element' does not exist on type 'JSX.IntrinsicElements'

javascript

element

reactjs