Reactでは、どうやってrefが未定義/ nullにならないようにすることができますか？

Question

私はシンプルな音楽再生コンポーネントを作っています。そのアイデアは、あなたがボタンをクリックすることであり、トラックは記述テキストと共に変わる。

var React = require('react'); 

let rock = require('../images/pngs/rock.png'); 
let none = require('../images/pngs/none.png'); 
let blue = require('../images/pngs/blue.png'); 
let flash = require('../images/pngs/flash.png'); 
let estim = require('../images/pngs/estim.png'); 
let urban = require('../images/pngs/urban.png'); 
let intl = require('../images/pngs/intl.png'); 

export default class Radio extends React.Component { 

    constructor (props) { 
     super(props); 

//The state that changes the info related to the tracks 

     this.state = { 
     audiosrc: "", 
     station: "", 
     name: "Radio", 
     artist: "Off" 
     } 
    } 

    //The ref is to get the audio element below, but its always null or undefined 

    componentDidMount() { 
    let radio = this.refs.playmusic; 
    } 

    //The click that enables the text to change 

    handleClick =() => { 
     this.setState({ 
     audiosrc: 'music/come.mp3', 
     station: "Vice Rock Radio", 
     name: "COME WITH ME", 
     artist: "Puff Daddy & Jimmy Page" 
     }); 

     radio.load(); 
     radio.play(); 
    } 

    render() { 
     return (
     <section className={this.props.radioClass}> 

     <div className="septagon"> 
      <div className="labels"> 
       <p> 
        <em>{this.state.station}</em> 
       </p> 
       <p>{this.state.name}</p> 
       <p>{this.state.artist}</p> 
      </div> 
      <span className="deg40" onClick={this.handleClick} 
      ><img src={rock} alt="" /></span> 
      <span className="deg90"><img src={none} alt="" /></span> 
      <span className="deg140"><img src={blue} alt="" /></span> 
      <span className="deg195"><img src={flash} alt="" /></span> 
      <span className="deg245"><img src={estim} alt="" /></span> 
      <span className="deg295"><img src={urban} alt="" /></span> 
      <span className="deg345"><img src={intl} alt="" /></span> 

      <audio id="playmusic" preload="none" ref="playmusic"> 
       <source type="audio/mpeg" src="" /> 
      </audio> 
     </div> 
     </section> 
    ) 
    } 
} 

オーディオ要素のセレクタを作成しようとしましたが、要素がnullになりました。私はcomponentDidMountを使用しましたが、私が（例えば）コンソールがcomponentDidMountの中にログオンしない限り、その要素は定義されていません。 handleClickを使用すると、オーディオ要素を未定義またはnullに設定しないようにするにはどうすればよいですか？

Answer 1

参考文献を使用する現代的な方法に切り替えることをお勧めします（詳細はhereを参照してください）。我々はそうすると、ビットのようにコードをリファクタリングした場合：

class Radio extends React.Component 
{ 
    constructor (props) { 
     super(props); 

//The state that changes the info related to the tracks 

     this.state = { 
     audiosrc: "", 
     station: "", 
     name: "Radio", 
     artist: "Off" 
     } 
    } 

    //The ref is to get the audio element below, but its always null or undefined 
    componentDidMount() 
    { 
     console.log(this.playmusic); 
    } 

    //The click that enables the text to change 
    handleClick() 
    { 
     this.setState({ 
      audiosrc: 'music/come.mp3', 
      station: "Vice Rock Radio", 
      name: "COME WITH ME", 
      artist: "Puff Daddy & Jimmy Page" 
     }); 

     radio.load(); 
     radio.play(); 
    } 

    render() 
    {  
    return (
     <section className={this.props.radioClass}> 

     <div className="septagon"> 
      <div className="labels"> 
       <p> 
        <em>{this.state.station}</em> 
       </p> 
       <p>{this.state.name}</p> 
       <p>{this.state.artist}</p> 
      </div> 
      <span className="deg40" onClick={() => this.handleClick()} 
      ></span> 

      <audio id="playmusic" preload="none" ref={(c) => this.playmusic = c}> 
      </audio> 
     </div> 
     </section> 
    ) 
    } 
} 

/* 
* Render the above component into the div#app 
*/ 
ReactDOM.render(<Radio />, document.getElementById('app')); 

それだけで正常に動作しますとthis.playmusicはあなたがcomponentDidMountにアクセスできることをあなたのオーディオインスタンスへの参照を、含まれています。