リアクションスペースの空白をレンダリング

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

あなたは<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 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>