关于前端:React-Hook-函数组件不使用JSX

37次阅读

共计 635 个字符，预计需要花费 2 分钟才能阅读完成。

在官网的文档里不应用 jsx 写法只有类组件的阐明与示例。搜寻了一圈并未找到有 hook + 函数组件的写法阐明。在这里做补充。

引入 react js 文件

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

创立容器

<div id="root"></div>

JavaScript 代码

const {createElement, useState} = React
const {render} = ReactDOM

function App(props) {const numState = useState(0)
  const [num, setNum] = numState

  function addNum() {setNum(num+1)
  }

  return createElement('div', null, [
    createElement('p', {key: 'pp'}, num),
    createElement('button', {
      onClick: addNum,
      key: 'btn'
    }, 'Add')
  ])
}

render(createElement(App, null, null), document.getElementById('root'))

正文完