Пишу программу на реагирующих электронах. В попытке использовать модальные окна из модуля response-bootstrap здесь. Я наткнулся на проблему и после некоторого тестирования выяснил, что причиной проблемы была строка useState (). Всякий раз, когда я включаю useState (), экран становится полностью пустым, причем не только для компонента, который использовал это состояние, но и для всего окна электронного приложения со всеми родительскими и родственными компонентами. Скорее всего, это не связано с его использованием для модального окна, поскольку оно также не работает с простыми случаями useState (). Вот мой код для этого компонента:
import * as React from 'react';
import { Component, useState } from 'react';
import {Character} from '../../../../Data/Character';
import StatusBar from '../../../Components/StatusBar';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
export interface HealthCardProps {
Naomi:Character
}
export interface HealthCardState {
}
class HealthCard extends React.Component<HealthCardProps, HealthCardState> {
GetLabelHealth(){
let label:string = this.props.Naomi.currentHealth+"/"+this.props.Naomi.maxHealth;
return label;
};
GetLabelHitDice(currentHD:number,HD:number){
let label:string = currentHD + "d"+HD
return label
}
render() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<div className="card" style={{textAlign:"center"}}>
<span style={{fontSize:"20px",color:"#708F93"}}>Hit Points</span>
<div className="HealthBar">
<StatusBar bColor="#9DBE9E"
fColor="#BAE6BC"
value={(this.props.Naomi.currentHealth/this.props.Naomi.maxHealth)*100}
label={this.GetLabelHealth()}/>
{this.props.Naomi.classes.length>=0 &&
this.props.Naomi.classes.map((c)=>
<div style={{marginTop:"2px"}}>
<StatusBar bColor="#c5d2db"
fColor="#D8E2E9"
value={(c.currentHDie/c.classLevel)*100}
label={this.GetLabelHitDice(c.currentHDie,c.hitDie)}/>
</div>
)}
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</> );
}
}
export default HealthCard;
Буду признателен за любую помощь, я новичок в электроне и вообще реагирую.
react
вы используете только хукиuseState
с функциональными компонентами, проверяйте реагирующую документацию на хуки reactjs.org/docs/hooks-state.html - person Mu-Majid   schedule 26.07.2020