Piszę program reakcji. W próbie używania modów z modułu reagowania-bootstrap Oto. Pobrałem problem i po tym, jak niektóre testowanie zorientowały się, że była to linia Useestate (), która powodowała problem. Ilekroć włączam usestate () ekran idzie całkowicie pusty, nie tylko komponent, który był używany przez państwo, ale całe okno aplikacji elektronowej ze wszystkimi składnikami rodzicielskimi i rodzeństwowymi. Nie jest to związane z używaniem go dla modalnego najprawdopodobniej, ponieważ nie działa również z przypadkami zwykłymi (). Oto mój kod dla tego komponentu:

    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;

Byłbym wdzięczny za wszelką pomoc, jestem nowy w elektronie i ogólnie reaguję.

1
Galina Vitvitskaya 26 lipiec 2020, 02:16

1 odpowiedź

Najlepsza odpowiedź

Aktualizacja Rozwiązałem mój problem, częściowo dzięki MA-MAJID w komentarzach. Oto zaktualizowany kod w przypadku, gdy ktoś zaczyna się i potyka się w tym.

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> {
    state = {
        isOpen: false
      };

      openModal = () => this.setState({ isOpen: true });
      closeModal = () => this.setState({ isOpen: false });

    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
    }
     Example() {
        const [show, setShow] = useState(false);
      
        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);
      
        return (
          <>
            <Button variant="primary" onClick={handleShow}>
              Launch demo modal
            </Button>
      
            
          </>
        );
      }
    
    render() { 
      

  return (
      
    <>
        <div className="card" style={{textAlign:"center"}}>
        <span style={{fontSize:"20px",color:"#708F93"}}>Hit Points</span>
        <div className="HealthBar" onClick={this.openModal}>
            <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>
                )}
                
        </div>
    </div>
    <Modal show={this.state.isOpen} onHide={this.closeModal}>
              <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={this.closeModal}>
                  Close
                </Button>
                <Button variant="primary" onClick={this.closeModal}>
                  Save Changes
                </Button>
              </Modal.Footer>
            </Modal>
    </> );
    }
}
 
export default HealthCard;
0
Galina Vitvitskaya 26 lipiec 2020, 00:14