点击 开关按钮的时候，一直不响应，没有任何的反应。请问这个是什么原因呢?

Question

我有代码如下：

import React from 'react'

function App5() {

  const handleClick = () => {
    console.log(123)
  }

  return (      
    <div
      style={{ position: 'relative', height: '100vh' }}
    >
     
      <div id="header" style={{ width: '100%', height: '24px', backgroundColor: '#ddd',
        display: 'flex', justifyContent: 'flex-end'
    }}>  
      {/* Q1: 如何让区域1 在中间呢？ */}
          <span>  区域1 </span>  

      {/* Q2: 没有响应点击事件 */}
          <button 
            onClick={ handleClick}
          >开关</button>
      </div>


      <div id="content" style={{  position: 'absolute', top: '24', bottom: '24px', width: '100%', height: '100%' }}>


      </div>

      <div id="footer" style={{  position: 'absolute', bottom: 0, width: '100%', height: '24px', backgroundColor: '#3472BB' }}></div>
    </div>
  )
}

export default App5

展示效果为：

但是在我点击 开关按钮的时候，一直不响应，没有任何的反应。

1、请问按钮不响应的原因是什么呢?

2、如何让<span> 元素（内容为：区域1 ）居中呢？

Answer 1

1、没看出哪里有问题，主要检测事件名变量名有没有写对，元素有没有被遮盖，console有没有被重写等
2、可以给span加上margin: 0 auto;进行居中