Reactの子コンポーネントに小道具を渡す方法

Question

私は単一ページアプリケーションを開発しており、子認証コンポーネントにユーザー認証データを渡したいと考えています。どのように私は子コンポーネントのreactjsでそれを渡してアクセスすることができます。私はアプリのコンテナで認証メソッドを呼び出していて、子コンポーネントのいくつかに渡す必要があります。

@asyncConnect([{ 
promise: ({ store: { dispatch, getState } }) => { 
    const promises = []; 
    if (!isLoaded(getState())) { 
     promises.push(dispatch(loadmyauth())); 
    } 
    return Promise.all(promises); 
} 
}]) 
@connect(
state => ({ 
    user: state.auth.user 
})) 
export default class App extends Component { 
static propTypes = { 
    children: PropTypes.object.isRequired, 
    user: PropTypes.object 
}; 
static contextTypes = { 
    store: PropTypes.object.isRequired 
}; 
constructor(props) { 
    super(props); 
    var user = { 
     auth :'false', 
     account_type : 'N', 
     profile_pic : null, 
     useremail : null, 
     userid : null, 
     username : null, 
     FNAME : null, 
     LNAME : null, 
    } 

    this.state = { 
     user: props.user, 
     authloaded: false, 
    } 
} 
render() { 
    const { children } = this.props; 
    return (
     <div> 
      <Helmet {...config.app.head}/> 
      <Header user={this.state.user} /> 
      <div className="mainapp-content">{this.props.children}</div> 
     </div> 
    ); 
} 
} 

Answer 1

私はreduxを使用してアプリケーションの状態を管理することでこの問題を解決しました。私は反応と還元を使って各コンポーネントにローカルで状態を保存し、データを保持します。私がデータを変更したいときは、反応状態であるで変更し、還元型データでも変更するので、データは同期した状態に保たれます。

Answer 2

私はMobXが良い状態マネージャであり、それはReactで非常にうまく機能しました。 Reactのcontextから<Provider>までのコンポーネントを利用することができます。

let store = observable({ 
    userInfo: myUserInfo 
}); 

次にノードでアプリケーションをラップ：

<Provider store={store}> 
<MainAppNode> 
</Provider> 

あなたのコンポーネントでは、などのコンポーネントを飾ることでストアにアクセス：

import { observer, inject } from 'mobx-react' 
@inject("store") @observer class AddBar extends React.Component { 
    //access your store with this.props.store 
} 

Answer 3

あなたは私よりもReduxのを使用している場合あなたのアプリコンポーネントに状態を設定するとは思わない。代わりに州はreduxストアのハンドルで、アプリコンポーネントには小道具として渡されます。しかし、私は間違っている可能性があります、私はreduxの専門家ではありません。

あなたのアプリケーションコンポーネントで状態を処理し、コンテキストでそれを渡す場合は、これを開始する必要があります。

import React from 'react'; 
import _ from 'underscore'; 

var AppHeader = React.createClass({ 

    contextTypes: { 
    appManager: React.PropTypes.object 
    }, 
    render() { 

    return <div> 
       <b>First Name:</b><span>{this.context.appManager.User.FirstName}</span><br/> 
       <b>Last Name:</b><span>{this.context.appManager.User.LastName}</span><br/> 
      </div> 
    } 

}); 

var App = React.createClass({ 

    getInitialState() { 
    return { 
     User: { 
     FirstName: '', 
     LastName: '' 
     } 
    } 
    }, 
    childContextTypes: { 
     appManager: React.PropTypes.object 
    }, 
    getChildContext() { 
     return { 
      appManager: { 
       User: _.extend({}, this.state.User) 
      } 
     } 
    }, 
    setUserInfo() { 

    if (this.state.User.FirstName == 'Homer') { 
     this.setState({ 
     User: { FirstName: 'Peter', LastName: 'Griffin' } 
     }); 

    } else { 
     this.setState({ 
     User: { FirstName: 'Homer', LastName: 'Simpson' } 
     }); 
    } 
    }, 
    render() { 
    return <div> 
     <h1>My App!</h1> 
     <input type="button" value="Update User Stat!" onClick={this.setUserInfo} /> 
     <h3>Header Info</h3> 
     <AppHeader/> 
     <h3>The Content</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus turpis, bibendum sit amet finibus nec, imperdiet ut nisi. Maecenas et orci vitae ante convallis iaculis at sit amet augue. Fusce est libero, interdum vitae interdum id, auctor eu ex. Donec pretium quis nibh et ornare. Donec sodales elit at vehicula rhoncus. In facilisis facilisis sem a tristique. Sed non nulla nec velit maximus aliquet sit amet vitae eros. In finibus tortor ut ipsum porttitor, et ullamcorper lorem facilisis. Sed porttitor turpis ac vulputate porta. Fusce gravida tellus elit, sed feugiat sapien tincidunt ut. Maecenas augue purus, dictum id eros a, tincidunt fringilla nisi. In eros neque, pulvinar ac velit vel, fermentum facilisis justo. Phasellus laoreet egestas tortor, id tincidunt eros tempus et. Morbi et diam ut ante sodales eleifend et eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sodales eget ex sit amet interdum. 
     </p> 
     </div> 
    } 
}) 

export default App; 

コンテキストを動作させるには、両方のコンポーネントで設定する必要があります。 1つはプロバイダーである必要があり、他はレシーバーである必要があります。あなたのケースでは、AppコンポーネントはchildContextTypesプロパティとgetChildContextメソッドでコンテキストを定義することによって、その子にコンテキストを提供する必要があります。

childContextTypes: { 
     appManager: React.PropTypes.object 
    }, 
    getChildContext() { 
     return { 
      appManager: { 
       User: _.extend({}, this.state.User) 
      } 
     } 
    }, 

は、あなたの子供のコンポーネントはそうのようなcontextTypesプロパティを使用して、受信機としてマーク：

contextTypes: { 
    appManager: React.PropTypes.object 
    }, 

これを行うことによって、あなたは直接小道具を渡すことなく、これらの二つの成分をリンクします。子コンポーネントはthis.contextを使用することができます[親の場合は 'appManager']。['appManager'、この場合は 'User'で定義されたメソッドまたはプロパティ]

ユーザープロパティは、Appコンポーネントのユーザー状態のコピーになります。この例では

User: _.extend({}, this.state.User) 

あなたはそれがコンテキストを経由して、すべての子コンポーネントを更新するアプリケーション・コンポーネントの状態を変更するためのボタンをクリックした場合。これを実際に見るために私はwebpackbin you to play withを作った。

これは、あなたの子供がどんなものかわからないが、それでもデータを提供する必要がある場合にのみ有効です。簡単な解決策は、ユーザーを小道具として子供に直接渡すことです。