老师可以再详细介绍一下什么是逻辑组件吗？

Question

如题

Answer 1

西门老舅 2024-04-16 12:55:46

你好，这里所说的逻辑组件指的是在JS中进行使用的组件，并不是在结构中使用的组件。比如：Message消息框组件

• 提问者 LydiaSo #1

  不好意思，我剛開始學前端，很多基礎還待建立。可以再舉例其他邏輯組件嗎？結構組件是不是與它相對的一個概念，結構組件可以也舉一些例子嗎？
  根據目前學習react的經理。所有組件都是在js或者jsx裡面寫的，這些全部都是邏輯組件嗎？
  例如之前做的簡易購物車案例，整個購物車都是寫在jsx裡面的，這個是不是就是邏輯組件？

• 西门老舅 回复 提问者 LydiaSo #2

  import { message, Button } from 'antd'
  
  function App() {
    const info = () => {
      message.info('Hello, Ant Design!')
    }
    return (
      <>
        <Button type="primary" onClick={info}>
          Display normal message
        </Button>
      </>
    )
  }
  
  export default App
  这里的message就是逻辑组件，Button就是结构组件。
  通过JS调用的就是逻辑组件，通过标签形式调用的就是结构组件。
  其实都是功能组件，所以也没有太大必要分的那么清楚，只要记住组件是可以复用的结构、逻辑、样式的一个整体就可以了。

• 提问者 LydiaSo 回复 西门老舅 #3

  好的，謝謝老師這個例子