将标题放入反应中时遇到问题

Question

我正在尝试放置 h1 标题，但如果我放置唯一的标题并注释掉按钮，则标题不会打印。如果我评论标题，那么按钮不会打印。但一起不打印任何东西。有什么建议吗？

反应：

class App extends React.Component {  
  constructor(props) {  
    super(props);
      this.state = {    
         drumPads : [   
          {  
            id: "Q",  
            src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
            beat: "Heater-1",
          },
          {
            id: "W",
            src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
            beat: "Heater-2"
          },
    }     

 handleClick(id, beat) {
     return () => {
        document.getElementById(id).play();
        this.setState({
          beatName: beat,
         });
     };
  }

  render() {
      return (
        <Fragment>
           <h1>DrumMachine</h1>
           <div>
              this.state.drumPads.map((button, i) =>
                   <button key={i}  onClick={this.handleClick(button.id, button.beat)}><h1>{ button.id }</h1>
                       <audio id={button.id} src={button.src} />
                   </button>
              )
            </div>
        </Fragment>
    )
   }
  }

  ReactDOM.render( <App />,
     document.getElementById("root")
   )

Answer 1

您需要有一个父元素，而不是 <div></div> 后跟另一个 <div></div>。您应该使用 React.Fragment 作为父元素：

render() {
   return (
     <>
        <h1>Drum Machine</h1>
        <div>
          //other stuff
        </div>
     </>
  );
}

代码中还有一些语法错误，即：

• 没有在构造函数中关闭数组
• 构造函数中的this.state 没有右大括号
• map 在render() 中的表达式周围没有大括号

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      drumPads: [
        {
          id: "Q",
          src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
          beat: "Heater-1"
        },
        {
          id: "W",
          src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
          beat: "Heater-2"
        }
      ]
    };
  }

  handleClick(id, beat) {
    return () => {
      document.getElementById(id).play();
      this.setState({
        beatName: beat
      });
    };
  }

  render() {
    return (
      <React.Fragment>
        <h1>DrumMachine</h1>
        <div>
          {this.state.drumPads.map((button, i) =>
          <button key={i} onClick={this.handleClick(button.id, button.beat)}>
            <h1>{button.id}</h1>
            <audio id={button.id} src={button.src} />
          </button>
          )}
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>