反應 - 檢查是否存在道具

我在互聯網上搜索了這個問題的答案，但我沒有找到答案。因此我在這裏發佈我的問題。反應 - 檢查是否存在道具

我有一個父組件（App）和一個子組件（Child）。應用程序組件有與它的一些數據，像這樣的狀態：

class App extends Component { 
    constructor() { 
     super() 

     this.state = { 
      currentOrganization: { 
       name: 'name', 
       email: 'email' 
      } 
     } 
     render() { 
      return (
       <Child data={this.state.currentOrganization} /> 
      ) 
     } 
    } 
}

在我的孩子分量，我有一個表格：

class Child extends Component { 
    constructor() { 
     super() 

     this.state = { 
      formData: { 
       name: '', 
       email: '', 
      } 
     } 
    } 

     render() { 
      return (
      <Form ... /> 
     ) 
     } 
    }

根據該陣營文檔，表單一般應該有包含與表單的每個元素相對應的屬性的狀態。位於我的子組件中的表單必須具有currentOrganization（如App組件中所示）的數據預填充到它自己。

爲了做到這一點，我必須將孩子的狀態設置爲從父母收到的道具。

什麼是最好的方式來檢查我的孩子組件是否收到它需要的道具來更新自己的狀態？

（如果有人知道..）React團隊沒有添加像componentDidReceiveProps()這樣的生命週期函數的原因是什麼？

來源

2017-09-20 lsimonetti

「什麼是爲什麼球隊在陣營沒有添加一個生命週期函數像componentDidReceiveProps（）的原因是什麼？」檢查屬性 - >是否'componentWillReceiveProps（）'不工作您？ https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops –

React有'componentWillReceiveProps' –

這會是什麼？我的意思是，你是通過整個狀態而不是組件實際需要的 - 所以你需要檢查構建中的道具，didMount，willReceiveProps等。我不太明白這個問題。 –

您可以檢查constructor中的初始道具。

class Child extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     formData: { 
     name: props.name || '', 
     email: props.email || '', 
     } 
    } 
    } 

    render() { 
    return (
     <Form ... /> 
    ) 
    } 
}

P.S. props是JS對象，所以你可以這樣 "prop_name" in this.props // true|false

來源

2017-09-20 19:34:03

+1在構造函數中使用'props.xxx'而不是'this.props'並使用空字符串輸入值而不是null。 – Chris

也可以寫成：'const {name =''，email =''} = props'，然後在這個*構造函數*中使用'this.state.formData（{name，email}）'。 – zvona

'this.state.formData（）'？ –

反應 - 檢查是否存在道具

回答

相關問題