Как передать реквизиты дочерним компонентам в 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

Я столкнулся с этим решением, используя сокращение для управления состоянием приложения. Я делаю локально для каждого компонента с реакцией и сокращением для хранения данных. Когда я хочу изменить данные, я меняю его на локально с реактивным состоянием, а также с данными редукта, поэтому он синхронизирует данные.

Answer 2

Я нашел MobX хорошее состояние менеджер, и она работает очень хорошо с React. Вы можете использовать React's 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 и передается вашему компоненту приложения в качестве реквизита. Но я могу ошибаться, я не специалист по редукту.

Если вы хотите обрабатывать состояние своего компонента приложения и передавать его через контекст, это должно начать.

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; 

Для контекста работы вам необходимо установить его в обоих компонентах. Нужно быть поставщиком, а остальные должны быть приемниками. В вашем случае компонент 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», в данном случае «Пользователь»]

Пользовательское свойство будет копией состояния пользователя в компоненте App.

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

В этом примере, если вы нажмете кнопку, это изменит состояние в компоненте приложения, которое будет обновлять все дочерние компоненты через контекст. Чтобы увидеть это в действии, я сделал webpackbin you to play with.

Предоставлено это полезно, только если вы не знаете, что ваши дети будут, но все равно должны предоставить им данные. Более простым решением было бы передать пользователя в качестве реквизита для ребенка напрямую.