![](/img/trans.png)
[英]Pass data from child to parent and to another child component React Js
[英]Pass data from parent to child in lightning web component using Charts Js
我最近在 Lightning Web 組件中使用 Charts JS 時遇到了問題。 我想分享我為遇到問題的人找到的解決方案
在父組件上更新時如何手動處理子組件中的數據更改。 這將適用於所有內容,但我試圖更新他們展示的 Chartsjs 示例。
這是我想出的解決方案。
父控制器具有以下嵌套函數
@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
if (data) {
console.log('getRecord Data', JSON.stringify(data))
this.contact = data;
getAllDateRecords({ contactId: this.recordId })
.then(result => {
this.allDateRecords = result;
this.chartReady = true;
})
.catch(err => console.log(JSON.stringify(err)));
} else if (error) {
console.error('error', error)
this.contact = undefined;
}
}
父組件有 c-debt-chart 組件和它從所有日期記錄接收數據:
<template>
<div class="slds-page-header__row slds-accordion__content">
<div class="c-container w-100">
<lightning-layout horizontal-align="space">
<lightning-layout-item padding="around-small">
<template if:true={chartReady}>
<c-debt-chart all-date-records={allDateRecords}></c-debt-chart>
</template>
</lightning-layout-item>
</lightning-layout>
</div>
</div>
<template>
問題是 Salesforce 上的示例沒有顯示如何更新圖表 js 中的數據。 這是我使用 Getter 和 Setter 找到的解決方案
子組件債務圖表
<template>
<lightning-card title="Debt Overview" icon-name="standard:currency">
<div class="slds-m-around_medium">
<canvas class="donut" lwc:dom="manual"></canvas>
</div>
</lightning-card>
</template>
債務圖表控制器
每次變量 allDateRecords 在父級別發生變化。 它將觸發孩子使用 getter setter 方法進行更新。 這樣,在 setter 方法上,它將觸發 seperateDateObject 函數,該函數執行一些邏輯來更新圖表。
@api
get allDateRecords() {
return this._allDateRecords;
}
set allDateRecords(value) {
this._allDateRecords = value;
this.separateDateObject();
}
當您的邏輯僅依賴一個 api 屬性時,上述解決方案有效
如果您有多個可以同時更改的 api 屬性,這些屬性也應該共同用於決策,您可能想要使用 renderCallback() 來執行邏輯。
@api
get prop1() {
return this._prop1;
}
set prop1(value) {
this._prop1= value;
this.somelogic(); //needs to be called in every dependent set prop
}
@api
get prop2() {
return this._prop2;
}
set prop2(value) {
this._prop2= value;
this.somelogic(); //needs to be called in every dependent set prop
}
somelogic(){
this.showsomething = this._prop1 && this._prop2; //dependent logic
}
在每個 setter 中調用 somelogin 也可能導致在設置屬性期間出現突然的 UI 行為。
反而
renderedCallback(){
this.somelogic(); //can even execute code conditionally
}
如果未觸發渲染回調,則通過使用模板中的 api 屬性強制渲染 if:true,有助於實現故障安全代碼
<template if:true={_prop1}>
<template if:true={_prop2}>
<!--place dependant html here-->
<template>
<template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.