web-dev-qa-db-fra.com

Rendre un espace vide dans React

Veuillez consulter l'extrait ci-dessous. J'essaie de rendre un texte clignotant qui, lorsqu'il n'apparaît pas, laisse un espace vide. Cependant, React supprime simplement l'élément tous ensemble, semble-t-il. Comment puis-je correctement rendre un espace vide dans React? J'ai essayé de faire des recherches et des tests avec différentes étendues, mais je n'ai toujours pas réussi à aller nulle part . Merci.

class Blinker extends React.Component {
    constructor(props) {
    super();
    this.state = {
      appear: true
    }
    this.blinker = this.blinker.bind(this);
  }

  blinker()  {
    this.setState({appear: !this.state.appear });
  }

  componentDidMount() {
    setInterval(this.blinker, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.blinker);
  }

  render() {
    const name = "testing";
    const underScore = "_";
    const com = "com";
    return (
      <div>
        <div id="test"> { name } </div>
        <div id="test">
          { (this.state.appear) ? underScore : ' '}
        </div>
        <div id="test"> { com } </div>
      </div>
    );
  }
}



ReactDOM.render(<Blinker />, app);
#test {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>
javascriptreactjsecmascript-6
7
Jimmy

Vous pouvez utiliser <span>&nbsp;&nbsp;</span>:

class Blinker extends React.Component {
    constructor(props) {
    super();
    this.state = {
      appear: true
    }
    this.blinker = this.blinker.bind(this);
  }

  blinker()  {
    this.setState({appear: !this.state.appear });
  }

  componentDidMount() {
    setInterval(this.blinker, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.blinker);
  }

  render() {
    const name = "testing";
    const underScore = "_";
    const com = "com";
    return (
      <div>
        <div id="test"> { name } </div>
        <div id="test">
          { (this.state.appear) ? underScore : <span>&nbsp;&nbsp;</span>}
        </div>
        <div id="test"> { com } </div>
      </div>
    );
  }
}



ReactDOM.render(<Blinker />, document.getElementById('app'));
#test {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>
4
Jalissa
class Blinker extends React.Component {
    constructor(props) {
    super();
    this.state = {
      appear: true
    }
    this.blinker = this.blinker.bind(this);
  }

  blinker()  {
    this.setState({appear: !this.state.appear });
  }

  componentDidMount() {
    setInterval(this.blinker, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.blinker);
  }

  render() {
    const name = "testing";
    const underScore = "_";
    const com = "com";
    return (
      <div>
        <div id="test"> { name } </div>
        <div id="test">
          { (this.state.appear) ? underScore : "\u00a0\u00a0"}
        </div>
        <div id="test"> { com } </div>
      </div>
    );
  }
}



ReactDOM.render(<Blinker />, app);
#test {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>
3
xDreamCoding

C'est parce que les trois lignes imbriquées sont transposées en tant qu'enfants individuels de l'élément div parent, sans tenir compte des espaces. La solution consiste à mettre un espace explicitement entre les éléments:

<div>
    <div id="test"> { name } </div>
    {''}
    <div id="test">
          { (this.state.appear) ? underScore : "\u00a0\u00a0"}
    {''}
    </div>
        <div id="test"> { com } </div>
</div>
3
Yilmaz

Je ne l'ai pas testé, mais ça devrait marcher.

<div id="test" style={{ visibility: this.state.appear ? 'visible' : 'hidden' }}>
  {{underScore}}
</div>
2
Said Kholov

J'utilise généralement <Fragment>&nbsp;</Fragment>, et le rendre par programme autant de fois que je le souhaite. Ce qui suit est une autre utilisation similaire de 3 caractères spéciaux différents destinés à être incorporés. ????

import './rating.css'

let starMap={
  '1': <Fragment>&#xe033;</Fragment>,
  '0.5': <Fragment>&#xe032;</Fragment>,
  '0': <Fragment>&#xe031;</Fragment>
}



export default class Rating extends React.Component {
  constructor(ops) {
    super(ops)
  }

  render() {
    return (
      <Fragment>
        <span className={'score'} style={{marginRight: '7px'}}>
          <span className={'star'}>{starMap[1]}</span>
          <span className={'star'}>{starMap[1]}</span>
          <span className={'star'}>{starMap[1]}</span>
          <span className={'star'}>{starMap[1]}</span>
          <span className={'star'}>{starMap[0.5]}</span>
        </span>
      </Fragment>
    )
  }
}
1
sully