我对这条线有问题:
<Route path="/" render={() => isReg ? <Registro />: <Home /> } />
我得到的是这个:
<块引用>JSX 元素类型 'Element | undefined' 不是构造函数 用于 JSX 元素。类型“未定义”不可分配给类型 '元素 |无效的'。 TS2605
我想要做的是确认用户是否注册了isReg变量,如果已经注册,必须显示“/home”,否则显示“/Registro”
但我无法修复该条件路由语句。我将不胜感激。提前致谢。
const App: React.FC = () => {
const [isReg, setIsReg] = useState(false);
useEffect(() => {
if(getItem("isRegistered2")==null){
console.log(getItem("isRegistered2"));
setIsReg(true);
}
else{
setIsReg(false);
}
}, []);
return(
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main" when="(min-width: 4096px)">
<Menu />
<IonRouterOutlet id="main">
<Route path="/" render={() => isReg ? <Registro />: <Home /> } />
<Route path="/registro" component={Registro} exact={true}></Route>
<Route path="/ingresar" component={Ingresar} exact={true}></Route>
<Route path="/MisServicios" component={MisServicios} exact={true}></Route>
<Route path="/Favoritos" component={Favoritos} exact={true}></Route>
<Route path="/HistorialServicios" component={HistorialServicios} exact={true}></Route>
<Route path="/Completarinfo" component={Completarinfo} exact={true} />
<Route path="/Login" component={Login} exact={true} />
<Route path="/tab2" component={Tab2} exact={true} />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
);
};
export default App;
英文
我认为问题出在 Home 组件上。因为如果我为另一个组件更换家,我没有问题。我在 Home 中看到的不同之处在于它有一个 Modal。
Home.tsx
const Home = () => {
const [showModal, setShowModal] = useState({ isOpen: false });
const [retVal, setRetVal] = useState(null);
const [count, setCount] = useState(0);
const [login, setLogin]=useState(0);
const axios = require('axios');
const data2 = getLocation();
if(getItem("isRegistered")!=null){
console.log(getItem("isRegistered"));
setLogin(1);
}
else{
setLogin(0);
}
data2.then((value)=>{
console.log(url+value);
axios.get(url+value).then((resp: { data: any; }) => {
console.log(resp.data);
});
})
if(login===1){
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonGrid>
<IonRow id="header">
<IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
<IonCol id="columna2" ><Busqueda /></IonCol>
<IonCol id="columna3" size="2">
<IonChip onClick={() => { setShowModal({ isOpen: true}); setCount(0)}}id="user" >
<IonIcon icon={person} id="foto-usuario"/>
</IonChip>
</IonCol>
</IonRow>
</IonGrid>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonModal
animated={true}
isOpen={showModal.isOpen}
onDidDismiss={() => setShowModal({ isOpen: false })}
>
<MyModal
tipo={count}
onClose={(value: React.SetStateAction<null>) => {
setShowModal({ isOpen: false });
value ? setRetVal(value) : setRetVal(null);
}}
/>
</IonModal>
<IonGrid>
<IonRow>
<IonCol>
<div id="contenedor-prueba">
<IonChip className="boton-generales" onClick={() => { setShowModal({ isOpen: true}); setCount(1)}}>
<IonLabel ><small>Emergencias</small></IonLabel>
<IonAvatar> <img src={"./assets/icon/sirena.png"} className="imagen-boton-principal"/></IonAvatar>
</IonChip>
</div>
</IonCol>
<IonCol>
<div id="contenedor-prueba">
<IonChip className="boton-generales" onClick={() => { setShowModal({ isOpen: true}); setCount(2)}}>
<IonLabel><small>Categorías</small></IonLabel>
<IonAvatar> <img src={"./assets/icon/servicio.png"} className="imagen-boton-principal"/></IonAvatar>
</IonChip>
</div>
</IonCol>
<IonCol>
<div id="contenedor-prueba">
<IonChip className="boton-generales" onClick={() => { setShowModal({ isOpen: true}); setCount(3)}}>
<IonLabel><small>Programado</small></IonLabel>
<IonAvatar> <img src={"./assets/icon/time.png"} className="imagen-boton-principal"/></IonAvatar>
</IonChip>
</div>
</IonCol>
</IonRow>
</IonGrid>
<ExploreContainer />
</IonContent>
</IonPage>
);
}
};
const MyModal: React.FC<{onClose: any; tipo: number;}> = ({ onClose, tipo }) => {
if(tipo===0){
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver"> </IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<br></br>
<IonButton href="/ingresar" id="botoningresoregistro">INGRESAR</IonButton>
<IonButton href="/registro" id="botoningresoregistro">REGISTRARSE</IonButton>
</div>
</IonContent>
</>
);
}
if(tipo===1){
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver"> </IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<strong>Emergencias</strong>
</div>
</IonContent>
</>
);
}
if(tipo===2){
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver"> </IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<strong>Categorías</strong>
</div>
</IonContent>
</>
);
}
else{
return (
<>
<IonHeader>
<IonToolbar>
<IonIcon icon={arrowBack} onClick={() => onClose(null)} slot="start" id="flecha-volver"> </IonIcon>
</IonToolbar>
</IonHeader>
<IonContent>
<div id="contenedor-central">
<strong>Programados</strong>
</div>
</IonContent>
</>
);
}
};
class Modal extends Component{
constructor(props: Readonly<{}>) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Se hizo click');
}
render() {
return <button onClick={this.handleClick}>Clickéame</button>;
}
}
class Busqueda extends Component{
Buscar = () =>{
var input=(document.getElementById("busqueda") as HTMLTextAreaElement).value;
if(input==="hola"){
console.log("hola perri");
}
}
render(){
return(<IonSearchbar type="text" placeholder="¿Qué servicios buscas?" onIonInput={this.Buscar} id="busqueda"></IonSearchbar>);
}
};
export default Home;
答案 0 :(得分:1)
定义一个处理条件渲染的新组件。 isReg 状态不应位于 App.js 中。
AppReg.js
const AppReg: React.FC = () => {
const [isReg, setIsReg] = useState(null);
useEffect(() => {
if (getItem('isRegistered2') == null) {
console.log(getItem('isRegistered2'));
setIsReg(true);
} else {
setIsReg(false);
}
}, []);
if (isReg == null) {
return <Loader />;
}
if (isReg === true) {
return <Registro />;
} else {
return <Home />;
}
};
export default AppReg;
App.js
const App: React.FC = () => {
return (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main" when="(min-width: 4096px)">
<Menu />
<IonRouterOutlet id="main">
<Route path="/" component={AppReg} />
<Route path="/registro" component={Registro} exact={true}></Route>
<Route path="/ingresar" component={Ingresar} exact={true}></Route>
<Route path="/MisServicios" component={MisServicios} exact={true}></Route>
<Route path="/Favoritos" component={Favoritos} exact={true}></Route>
<Route path="/HistorialServicios" component={HistorialServicios} exact={true}></Route>
<Route path="/Completarinfo" component={Completarinfo} exact={true} />
<Route path="/Login" component={Login} exact={true} />
<Route path="/tab2" component={Tab2} exact={true} />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
);
};
export default App;
更新:Home 组件需要在默认情况下返回 null。
答案 1 :(得分:0)
像这样使用它:
像这样初始化未定义的状态:
const [isReg, setIsReg] = useState();
然后像这样动态创建路由:
{isReg != undefined && <Route path="/" render={() => isReg ? <Registro />: <Home/>} />