在React中渲染空白空间

Question

请参阅下面的代码段。我试图渲染一个闪烁的文本，当它没有出现时，留下一个空的空间。但是，React似乎只是将所有元素一起移除。如何在React中正确渲染空白区域？试图用各种跨度做一些搜索和测试，但仍然没有得到任何地方。感谢。

combineActions

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;
}

Answer 1

您可以使用<span>&nbsp;&nbsp;</span>：

＆＃13;

＆＃13;

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'));

＆＃13;

#test {
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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>

Answer 3

没有测试过，但它应该可以工作。

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

Answer 4

这是因为三行嵌套行被转换为父div元素的单个子代，而不考虑空格。解决方案是在元素之间明确放置一个空格：

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

Answer 5

我通常使用<Fragment>&nbsp;</Fragment>，并根据需要以编程方式渲染它多次。以下是打算嵌入的3个不同特殊字符的另一种类似用法。 ?

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>
    )
  }
}