在 React 中渲染空白空間

Question

請看下面的片段。 我試圖渲染一個閃爍的文本，當它沒有出現時，會留下一個空白空間。 然而，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>

Answer 1

 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> 

Answer 2

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

Answer 3

這是因為三個嵌套的行被轉換為父div元素的單個子元素，而不考慮空格。 解決方案是在元素之間明確地放置一個空格：

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

Answer 4

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

Answer 5

沒有測試過，但它應該工作。

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

Answer 6

我使用樣式組件並創建了一個<Em />組件：

import styled from "styled-components"

const Em = styled.span`
  display: inline-block;
  width: ${({ size = 1 }) => size}em;
`

const App = () => {
  return <h1>I need<Em size={.5} />a half space</h1>
}