Ниже предоставлены три варианта, какой из них будет наиболее правильным и какие не могут существовать вообще. И если можно то добавтьте почему у Вас именно такое мнение.
//=== первый вариант =====================================================//
// один большой общий стор,
// который в реальном приложении
// будет хранить или передавать
// свойства для разных компонентов
function appStore() {
return {
getPropForComponentA(){
return 'some-value';
},
getPropForComponentB(){
return 'some-value';
}
};
}
export default class B extends Component{
constructor(props) {
super(props)
}
render(){
return (
<div propForComponentB={this.props.store.propForComponentB()}></div>
);
}
};
export default class A extends Component{
constructor(props) {
super(props)
}
render(){
return (
<B
propForComponentB={this.props.store}
propForComponentA={this.props.store.getPropForComponentA}
></B>
);
}
};
export default class App extends Component{
constructor(props) {
super(props)
}
render(){
return (
<A someProp={this.props.store}></A>
);
}
};
// передали один большой общий стор
// в приложение и все компоненты
// сами возьмут то что им нужно.
<App store={appStore()}></App>
//=== второй вариант =====================================================//
// один большой общий класс стор,
// который будет посылать события
// которое будет слушать компонент
// App и вызывать рендеренг передавая
// один большой стор чтобы все кому
// нужно брали то что нужно.
export default class AppStore extends EventEmitter{
constructor(){
super();
}
getPropForComponentA(){
return 'some-value';
}
getPropForComponentB(){
return 'some-value';
}
}
export default class B extends Component{
constructor(props) {
super(props)
}
render(){
return (
<div propForComponentB={this.props.store.propForComponentB()}></div>
);
}
};
export default class A extends Component{
constructor(props) {
super(props)
}
render(){
return (
<B
propForComponentB={this.props.store}
propForComponentA={this.props.store.getPropForComponentA}
></B>
);
}
};
export default class App extends Component{
constructor(props) {
super(props)
}
componentWillMount(){
return this.props.store.on('change', ()=> {
this.setState({
store: thie.props.store
});
});
}
render(){
return (
<A someProp={this.props.store}></A>
);
}
};
// передали один большой общий стор
// в приложение и все компоненты
// сами возьмут то что им нужно.
<App store={new AppStore()()}></App>
//=== третий вариант =====================================================//
// два отдельных маленьких сторов
// каждый заточен под свой компонент
export default class AStore extends EventEmitter{
constructor(){
super();
}
getPropForComponentA(){
return 'some-value';
}
}
export default class BStore extends EventEmitter{
constructor(){
super();
}
getPropForComponentB(){
return 'some-value';
}
}
export default class B extends Component{
constructor(props) {
super(props)
}
componentWillMount(){
return this.props.store.on('change', ()=> {
this.setState({
propForComponentB: thie.props.store.getPropForComponentB()
});
});
}
render(){
return (
<div propForComponentB={this.props.store.propForComponentB}></div>
);
}
};
export default class A extends Component{
constructor(props) {
super(props)
}
componentWillMount(){
return this.props.store.on('change', ()=> {
this.setState({
propForComponentA: thie.props.store.getPropForComponentA()
});
});
}
render(){
return (
<div store={new BStore()} propForComponentA={this.props.store.propForComponentA}></div>
);
}
};
export default class App extends Component{
constructor(props) {
super(props)
}
render(){
return (
<A store={new AStore()}></A>
);
}
};
// создаем приложение и уже каждый
// родитель устанавливает нужные
// и заточенные только под детей сторы
<App></App>
Средний