React 使用笔记

JiHua
2024-11-12
56

React 使用方法

1. React JSX 内部函数基本组成
function APP() {
    return (
    	<>
            <h1>你好世界</h1>
        </>
    )
}
export defalut APP

方法、导出该方法。
每个功能函数都有一个Return 将内部html代码返回给对应的方法函数在浏览器中展现出来。

2. React 组件化
src                         目录树
├─ assets        
│  └─ react.svg
├─ Footer        
│  └─ index.jsx  
├─ Header        
│  ├─ index.css  
│  └─ index.jsx  
├─ App.jsx       
├─ index.css     
└─ main.jsx

根据上面的基本构造来看 当我们想要在App.jsx中引入一个 组件，例如 Header组件 则我们仅需要像 Vue 中一样 使用 Import 导入即可，*引入组件名称需要为大写 否则不识别

例如：

import Header from './Header'
function App() {
  return (
    <>
      <Header />
    </>
  )
}
export default App

这样就能在页面上展现出引入的 Header 组件了。

3. React中的 'V-for' 遍历
var names = ['Alice', 'Emily', 'Kate'];
function App() {
  return (
    <>
      <div>
          {
            names.map(function (name) {
              return <div>Hello, {name}!</div>
            })
          }
  	  </div>
    </>
  )
}
export default App

值得注意的是，在 return 返回的 html 代码中想要实现 js 语法 则需要使用 花括号 进行“区域执行” 。
在里面使用 变量 也是如此 -- { item }。

例如：

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];

function App() {
  return (
    <>
     <div>
          { arr }
  	  </div>
    </>
  )
}
export default App
4. React中的 Props

React 中的 Props 组件传值很简单，不需要像Vue那样 专门写一个Props对象接着，然后再在tml中引入。

例如：

// 父组件中
import Header from './Header'

function App() {
  return (
    <>
      <Header title="你好世界"/>
    </>
  )
}
export default App

// 子组件中
function Header(Props) {
  return (
    <>
      <>{ Props.title }</>
    </>
  )
}
export default App

秉承你需要什么就传什么的需求

标签：React、使用方法、笔记