javascript 在 React 中渲染空白空间

Rendering empty space in React

提问by Jimmy

Please see the snippet below. I am trying to render a blinking text, that, when it does not appear, leaves an empty space. However, React is just removing the element all together it seems. How do I properly render an empty space in React? Tried to do some searching and testing with various spans but still didn't get anywhere. Thanks.

请看下面的片段。我试图渲染一个闪烁的文本，当它没有出现时，会留下一个空白空间。然而，React 似乎只是一起删除了元素。如何在 React 中正确渲染空白空间？尝试使用各种跨度进行一些搜索和测试，但仍然没有任何进展。谢谢。

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>

采纳答案by Jalissa

You could use <span>&nbsp;&nbsp;</span>:

你可以使用<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>

回答by Yilmaz

It is because the three nested lines get transpiled as individual children of the parent div element, without taking the spaces into account. Solution is putting a space explicitly between the elements:

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

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

回答by xDreamCoding

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>

回答by Said Kholov

Haven't tested it, but it should work.

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

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

回答by sully

I generally use <Fragment>&nbsp;</Fragment>, and programmatically render it as many times as I want. The following is another similar usage of 3 different special characters intended to be embedded.

我通常使用<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>
    )
  }
}