渲染React中的空白空間

請參閱下面的代碼片段。我試圖呈現一個閃爍的文字，當它不出現時，留下一個空白的空間。但是，React只是將它看起來一起移除。如何正確渲染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>

來源

2017-10-09 Jimmy

你不能在頁面 –

如果什麼三「測試」的ID，而不是添加或刪除文本就像你現在一樣，你在div上添加或者刪除'style =「display：none;」'' –

@SaidKholov你可以。你真的，真的不應該。 –

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

來源

2017-10-09 23:51:28 Jalissa

謝謝！我其實已經試過之前，現在我知道了！ – Jimmy

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>

來源

2017-10-09 23:41:15 xDreamCoding

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

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

來源

2017-10-09 23:48:38

渲染React中的空白空間

回答

相關問題