亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 中,如何將參數從子組件傳遞給父組件?

在 React 中,如何將參數從子組件傳遞給父組件?

一只斗牛犬 2021-11-25 19:06:52
在 React JS 中,我無法將值從子組件傳遞到父組件這個問題是上一個問題在 React JS 中的后續問題,我如何告訴父組件子組件發生了某些事情?這是我正在使用的代碼示例...我有一個問題和兩個問題:1) 盡管 'label' 在 的 render 方法中(我可以在調試器中看到它有一個值)InfoBox,但當它傳遞給 ContainingBox 的boxChosen方法時,它總是出現“未定義”。我在這里做錯了什么?2)在使用 JSX 構建 InfoBox 時,有什么方法可以減少重復(DRY this up)。特別是,讓我selectBox={this.boxChosen}煩惱的是在 JSX 中為每個 InfoBox 實例重復3) 孩子或父母對方法的命名是否有任何共同的模式或公認的做法?特別是,您會看到這段代碼讓我定義一個selectBox在子進程中調用的方法和另一個boxChosen在父進程中調用的方法。這對我來說似乎是任意的,因為我只是選擇了兩個沒有沖突的獨立名稱,以便使其更易于理解。但它讓我印象深刻,因為在一個更大的應用程序中,你需要一個一致的函數命名模式來識別哪些方法是“傳遞”方法(在這種情況下,selectBox)只是將東西傳回給父母。我不知道; 只是考慮是否存在命名約定。
查看完整描述

1 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

this.label不存在,所以它是未定義的。要么 pass this.state.label,要么因為你正在解構對象,只是label. 只是一個小錯誤

 render() {

    const {label} = this.state

    return (

      <StyledInfoBox onClick={() => {this.props.selectBox(label)}}>

        {label}

      </StyledInfoBox>

    )

  }

您也不需要進行兩次解構。


2. 不,你必須將所有的 props 傳遞給每個組件。沒有理由你不能把盒子扔進一個循環中。您可以將標簽放在一個數組中并迭代傳遞所有內容?,F在您只需要實際編寫一次。


class ContainingBox extends React.Component {

  const boxChosen =(label) => {}


  const labels = ['Aenean malesuada lorem', 'Lorem Ipsum dor ameet'];


  render() {

    return (

      <div>

        {labels.map((ele, index) => {

           <InfoBox

             key={index}

             blurb={{label: ele}}

             selectBox={this.boxChosen}

           />

        })}

      </div>

    )

  }

}

其他人可能比我能更好地回答這個問題。除了給它們命名一些有意義的東西之外,沒有真正的約定。你是對的,你可以給它們命名不同的東西,因為它們只是不同范圍內的函數。他們沒有什么特別之處。你能說出他們同樣的事情,但你并不需要到。您可以做的最好的事情是將它們命名為“自我記錄”的東西,在它被定義的地方。


查看完整回答
反對 回復 2021-11-25
  • 1 回答
  • 0 關注
  • 343 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號