Reactjs 使用React，如何防止ref未定义/为null？

我正在制作一个简单的音乐播放组件。这个想法是，你点击一个按钮，轨迹会随着描述性文本而改变

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>
      )
   }
}

var React=require（'React'）；
让rock=require（'../images/pngs/rock.png'）；
让none=require（'../images/pngs/none.png'）；
让blue=require（'../images/pngs/blue.png'）；
let flash=require（'../images/pngs/flash.png'）；
设estim=require（'../images/pngs/estim.png'）；
let urban=require（'../images/pngs/urban.png'）；
让intl=require（'../images/pngs/intl.png'）；
导出默认类Radio.Component{
建造师（道具）{
超级（道具）；
//更改与轨迹相关的信息的状态
此.state={
audiosrc:“，
电台：“，
名称：“收音机”，
艺术家：“关”
}
}
//ref用于获取下面的audio元素，但它始终为null或未定义
componentDidMount（）{
让收音机=this.refs.playmusic；
}
//使文本能够更改的单击
handleClick=（）=>{
这是我的国家({
audiosrc:“music/come.mp3”，
电台：“副摇滚电台”，
姓名：“跟我来”，
艺术家：“泡芙爸爸和吉米·佩奇”
});
radio.load（）；
收音机。播放（）；
}
render（）{
返回(

{this.state.station}

{this.state.name}

{this.state.artist}

)
}
}

---

我试图为音频元素创建一个选择器，但该元素为空。我使用了componentDidMount，但是元素没有定义，除非我（例如）将它记录在componentDidMount中。使用handleClick时，如何将音频元素设置为未定义或空？

我建议您切换到使用REF的现代方式（有关详细信息，请参阅）。如果我们这样做，并像这样重构代码：

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'));

class无线电组件
{
建造师（道具）{
超级（道具）；
//更改与轨迹相关的信息的状态
此.state={
audiosrc:“，
电台：“，
名称：“收音机”，
艺术家：“关”
}
}
//ref用于获取下面的audio元素，但它始终为null或未定义
componentDidMount（）
{
console.log（this.playmusic）；
}
//使文本能够更改的单击
handleClick（）
{
这是我的国家({
audiosrc:“music/come.mp3”，
电台：“副摇滚电台”，
姓名：“跟我来”，
艺术家：“泡芙爸爸和吉米·佩奇”
});
radio.load（）；
收音机。播放（）；
}
render（）
{     
返回(

{this.state.station}

{this.state.name}

{this.state.artist}

this.handleClick（）}
>
this.playmusic=c}>
)
}
}
/*
*将上述组件渲染到div#应用程序中
*/
ReactDOM.render（，document.getElementById（'app'））；

---

它可以正常工作，

这个。playmusic

将包含对您的音频实例的引用，您可以在

componentDidMount

中访问该实例，请参见。我想您必须使用

React.findDOMNode

。那么，在本例中，this.playmusic只是您指定给元素的名称？c只是一个变量名，比如x或i？

playmusic

将是

Radio

类的本地字段。是的，

c

只是传递给

ref

函数的参数的任意名称，其值存储在

playmusic

字段中，以便稍后访问。