react 父元件與子元件之間的值傳遞的方法

概念上，元件是封閉的環境。react中是單向資料流的設計，也就是是說只有父元件傳程式設計客棧遞資料給子元件這回事。以正確的技術說明，擁有者元件可以設定被擁有者元件中的資料。

那麼子元件要如何與父元件溝通這件事，簡單的來說，是一種迂迴的作法，在父元件中設定了乙個方法(函式)，然後傳遞給子元件的props，子元件在事件觸發時，直接呼叫這個props所設定的方法(函式)。但這中間，有誰(物件)呼叫了函式的設定，也就是this的作用。

父元件到子元件用props設定，子元件到父元件用上面說的方式，這是基本的套路，但它只適用於簡單的元件結構，因為它相當麻煩，而且不靈活。那麼如果要作到子元件與子元件要彼此溝通這件事，就不是太容易。當然，我想你已經聽過，複雜的應用需要額外使用f程式設計客棧lux或redux來解決這問題，這是必經之路。

不過，在思考整體的react應用設計時，要有應用領域狀www.cppcns.com態，也就是全域性狀態的概念。第一是應用領域state(狀態)的，通常會在父元件中，而不是子元件中，子元件有可能很多，位於樹狀結構很深的地方。

例子:子元件

import react, from 'react'

export default class item extends component

} 程式設計客棧handlechange())

//用傳過來的changeprice屬性(props)，是個函式，呼叫它把price交給父元件中的函式去處理

this.props.changeprice(price)

} render() = this.state;

return ()}}

父元件import react, from 'react';

import item from './item'

class app extends component }

//給子元件用來傳price用的方法

changeprice(price))

} render()

); }}

export default app;

本文標題: react 父元件與子元件之間的值傳遞的方法

本文位址: