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）。如果我们这样做并重构你的代码有点像这样：

obj -> true

它会正常工作，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中访问的音频实例的引用。

使用React，如何保持ref不被undefined / null？

1 个答案: