React JSの親子コンポーネントの更新された状態を渡す

Question

子コンポーネントのcenterプロパティに更新コンポーネントのaddressを親コンポーネントに渡したいとします。より具体的には、AppコンポーネントからBaseMapコンポーネントまでです。しかし、私はそれを動作させるように見えることはできません。助けることができる目の新鮮なペアは評価されるだろう！

これは私のコード（私はフェッチ機能を削除し、それはあなたを気にしないだろうので、それだけで正常に動作し、私はちょうど私の子コンポーネントの状態を更新する必要があります。）である：

親：

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     avatar: '', 
     username: 'nickname93', 
     realName: '', 
     location: '', 
     followers: '', 
     following: '', 
     repos: '', 
     address: '' 
     } 
    } 

    render() { 
    return (
     <div> 
     <SearchBox fetchUser={this.fetchUser.bind(this)}/> 
     <Card data={this.state} /> 
     <BaseMap center={this.state.address}/> 
     </div> 
    ); 
    } 

    fetchApi(url) { 
    // some fetch functionality 
    } 

    fetchUser(username) { 
    let url = `https://api.github.com/users/${username}`; 

    this.fetchApi(url); 
    } 

    componentDidMount() { 
    let url = `https://api.github.com/users/${this.state.username}`; 

    this.fetchApi(url); 
    } 

} 

と子コンポーネント：

this.props.centerの代わり this.state.centerを使用して

export default class BaseMap extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      center: [24, 56], 
      zoom: 11 
     } 
    } 

    render() { 
     return (
      <Col md={10} mdPull={1}> 
       <div className="map"> 
        <GoogleMap 
        bootstrapURLKeys={'AIzaSyBhzwgQ3EfoIRYT70fbjrWASQVwO63MKu4'} 
        center={this.state.center} 
        zoom={this.props.zoom}> 
        </GoogleMap> 
       </div> 
      </Col> 
     ); 
    } 
} 

Answer 1

あなたの価値は、あなたの子コンポーネントBaseMapに親コンポーネントAppからを渡されています。

this.state.centerの代わりにthis.props.centerを使用すると、親から子コンポーネントに渡されたプロパティ（propsとも呼ばれます）にアクセスするか、単に使用することができます。 this.propsを使用して

export default class BaseMap extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     center: [24, 56], 
     zoom: 11 
    } 
} 

render() { 
    return (
     <Col md={10} mdPull={1}> 
      <div className="map"> 
       <GoogleMap 
       bootstrapURLKeys={'AIzaSyBhzwgQ3EfoIRYT70fbjrWASQVwO63MKu4'} 

       center={this.state.center} // this is [24,56] 

       centerFromParentComponent = {this.props.center} // this is the property passed from parent component 

       zoom={this.props.zoom}> 
       </GoogleMap> 
      </div> 
     </Col> 
    ); 
} 

}

あなたがあなたの親コンポーネントから渡している（たとえば、状態、変数やメソッドなど）の任意のプロパティにアクセスすることができます。

また、componentWillReceiveProps()メソッドをご覧になることもできます。あなたはすぐにそれを必要とするかもしれません。

Answer 2

あなたはBaseMap親から状態更新を受け取りたい場合は、。 center小道具のデフォルト値を設定すると思われます。デフォルトの小道具を宣言するにはthe docです。