component

通過告訴 React 在點擊某個元素時顯示另一個組件，來切換組件的可見性。 在許多場景中，當點擊按鈕或鏈接時，您希望在屏幕內顯示完全不同的組件。 以導航結構為例，該如何實現呢？ 在這個例子中，我們將狀態集中管理在 App 組件中。 import React, { useState } from 'react'; const AddTripButton = (props) => { return <button onClick={props.addTrip}>Add a trip</button>; }; export default AddTripButton; 然後，在 App 組件中，通過將 addTrip 事件指定為 triggerAddTripState 方法來處理添加旅行的事件： <AddTripButton addTrip={this.triggerAddTripState} /> 使用 React hooks，首先導入 useState： import React, { useState } from 'react'; 然後聲明一個 “state” 變量： const [state, setState] = useState('start'); 在 JSX 中，根據此狀態值顯示和隱藏不同的組件： function App() { const [state, setState] = useState('start'); return ( <div> {state === 'start' && <AddTripButton addTrip={() => setState('add-trip')} />} {state === 'add-trip' && <AnotherComponent />} </div> ); }

這裡是如何在Vue.js中將一個組件引入到另一個組件中的方法。 假設你有一個位於 src/components/Pixel.vue 的Pixel組件。 在另一個位於 src/components/Canvas.vue 的Canvas組件中，你可以在Vue單頁組件的script標籤內引入該Pixel組件： <template> <p>Canvas</p> <Pixel /> </template> <script> import Pixel from './Pixel' export default { name: 'App', components: { Pixel } } </script>

使用Vue，您可以使用組件定義應用程式的佈局。起初，您手動將組件放置在所需位置，但有時需要更靈活的方式來根據應用程式狀態顯示或隱藏組件。 使用條件指令 最簡單的選擇是使用 v-if 和 v-else 指令。 這裡有個例子。v-if 指令檢查計算屬性 noTodos，如果狀態屬性 todos 至少包含一個項目，則返回false： <template> <main> <AddFirstTodo v-if="noTodos" /> <div v-else> <AddTodo /> <Todos :todos=todos /> </div> </main> </template> <script> export default { data() { return { todos: [] } }, computed: { noTodos() { return this.todos.length === 0 } } } </script> 這使得可以解決許多應用程式的需求，而無需達到更複雜的設定。條件可以嵌套，例如： <template> <main> <Component1 v-if="shouldShowComponent1" /> <div v-else> <Component2 v-if="shouldShowComponent2" /> <div v-else> <Component3 /> </div> </div> </main> </template> 使用 component 元件和 is 除了使用 v-if 和 v-else 結構，您可以建立模板，其中有一個將動態分配組件的佔位符。...

了解如何在React中引用DOM元素 React在构建应用程序时很擅长将DOM抽象化。但是，如果您想要访问React组件表示的DOM元素怎么办？也许您需要添加一个与DOM直接交互的库，比如图表库，或者需要调用一些DOM API或在一个元素上设置焦点。 无论原因如何，一个良好的实践是确保在直接访问DOM之前没有其他方法可以实现。 在组件的JSX中，您可以使用ref属性将DOM元素的引用赋给组件的属性： ref={el => this.someProperty = el} 例如，将其与一个button元素放在上下文中： <button ref={el => (this.button = el)} /> button是组件的一个属性，可以由组件的生命周期方法（或其他方法）用来与DOM进行交互： class SomeComponent extends Component { render() { return <button ref={el => (this.button = el)} /> } } 在函数组件中，机制是相同的，只是不使用this（因为它不指向组件实例），而是使用一个属性： function SomeComponent() { let button; return <button ref={el => (button = el)} />; }

學習如何在Svelte中導入組件 Svelte提供了單文件組件。每個組件都在.svelte文件中聲明，在其中可以編寫所需的HTML標記、CSS和JavaScript。 下面是一個簡單的Svelte組件示例，保存在名為Button.svelte的文件中： <button>按鈕</button> 您可以在該組件中添加CSS和JS，但這個純HTML標記已經是組件的標記，無需用其他特殊標記包裹它。 要將該組件的標記從該組件中導出，您不需要做任何操作。現在，您可以使用import ComponentName from 'componentPath'語法將其導入到任何其他Svelte組件中： <script> import Button from './Button.svelte'; </script> 現在，您可以在標記中使用這個新導入的組件，就像使用HTML標記一樣： <Button />

學習如何從 Svelte 組件導出函數和變數 你知道可以使用以下語法將一個 Svelte 組件導入另一個組件中： <script> import Button from './Button.svelte'; </script> 如果你想要導出更多東西呢？ 那麼你必須在組件中使用特殊的 script 標籤，並添加 context="module" 屬性進行導出。 以下是一個示例。假設你有一個名為 Button.svelte 的 Button 組件： <button>A button</button> 而且你希望其他組件能夠修改該按鈕的顏色。你可以使用 props，這只是一個示例。或者你可以提供一個名為 changeColor 的函數。 你可以在這個特殊的 script 標籤中編寫並導出它： <script context="module"> export function changeColor() { //...添加邏輯... } </script> <button>A button</button> 警告：我沒有實現實際的功能，但你可以理解這個示例。 需要注意的是，你可以在組件中添加另一個“普通”的 script 標籤。 現在其他組件可以導入 Button（默認導出）和 changeColor 函數： <script> import Button, { changeColor } from './Button.svelte' </script>