如何在react js中有條件地傳遞數據？

Question

我正在嘗試控制我的數據onApplyClick事件。 當我傳遞所有數據時它工作正常，但是當我嘗試有條件地傳遞數據時，它會拋出錯誤。

我的主要組件代碼是

            <MyComponent
                onApplyClick={(
                    myData: First & {
                        newData: Second;
                    }
                ) => console.log(myData)}
                getData={getData}       
            />

其中 First & Second 是一個接口。 現在我使用onApplyClick事件傳遞所有數據，例如 -

            onApplyClick={() => {
                let AData= {
                    first: "one",
                    second: "two
                };
                onApplyClick({
                    newData: AData,
                    Bdata: "three",
                    Cdata: "four"
                });
            }}

第二個界面是——

export interface Second  {
    first : string;
    second: string;
}

第一個界面是——

export interface First {
    Bdata? : string;
    Cdata? :string;
}

現在我想在條件為真時傳遞 Bdata 並且如果條件為假那么我想傳遞 Cdata onApplyClick 。

我正在嘗試使用此代碼傳遞數據 -

                onApplyClick({
                    newData: AData,
                    if(condition==true) {
                      Bdata: "three",
                    }
                    else {
                      Cdata: "four"
                    }
                });

在onApplyClick事件中傳遞條件時出現錯誤。 如何有條件地傳遞數據？

Answer 1

我認為在這種情況下最好的方法是使用 deferetnt 數據創建兩個回調。

或者用數據創建條件：

const data = condition ? data1: data2;

然后在回調中傳遞它。

onClick={() => callback(data)}

此致。

Answer 2

嘗試這個

 <MyComponent
         onApplyClick={( condition ?  { myData: First}:{ newData: Second}) => console.log(myData)}
         getData={getData}       
            />

Answer 3

對象中不能有條件。 您需要做的是將該條件置於對象之外，並在每個子句中返回不同的對象。

onApplyClick( condition ? {newData: AData, Bdata: "three"} : {newData: AData, Cdata: "four"} )