Как внедрить rootStore вне моего основного компонента? - PullRequest
Новая
       5

Как внедрить rootStore вне моего основного компонента?

0 голосов
/ 03 октября 2019

Я очень новичок в React, так что прости меня за недостаток знаний. Я использую mobx и реагирую. Я создал класс, я внедряю свой rootStore и затем экспортирую.

После экспорта я вызываю компонент и передаю реквизиты. Для одного из возвращаемых мне компонентов мне нужен доступ к корневому хранилищу. Есть ли способ «внедрить» это вне моего экспорта?

Я понимаю, что довольно плохо объясняю это. Я надеюсь, что кто-то с большим знанием, чем у меня, сможет помочь.

Я попытался передать путь rootStore в качестве реквизита. 

@inject("rootStore")
@observer
class AVAdditionalOptionsPanel extends Component {

render() {
const additionalOptionsStore = this.props.rootStore.additionalOptionsStore;

return ( 
<AdditionalOptionsGroup
   additionalOptionsData={additionalFilterData.labMatrix}
   onCheck={() => additionalOptionsStore.onCheckOption('labMatrix', 'Lab 
           Matrix')}
   labelText={"Lab matrix"}
   alertEntityName={"Lab matrix"}
   dsHeadingLabel={"Lab matrix"}
   store={additionalOptionsStore.additionalDSStore}
/>
}

export default AVAdditionalOptionsPanel;

const AdditionalOptionsGroup = observer(({additionalOptionsData, onCheck, labelText, alertEntityName, dsHeadingLabel, store}) => {

return (
<FormGroup
   elementType={elementTypes.checkbox}
   value={additionalOptionsData.value}
   checked={additionalOptionsData.checked}
   elementWidth={""}
   onChange={onCheck}
   text={labelText}
   hasLabel={false}
   additionalFormGroupClasses={"noborder"}
/>
<DuelingSelect
    store={store}
    availableHeading={`Available ${dsHeadingLabel} 
                     (${additionalOptionsData.availableOptions.length})`}
    selectedHeading={`Selected ${dsHeadingLabel} 
                    (${additionalOptionsData.selectedOptions.length})`}
/>

В компоненте DuelingSelect внизу. Мне нужно store = {this.props.rootStore.additionalOptionsStore.additionalDSstore}, но у меня нет способа получить доступ к rootStore там, потому что он вводится выше.

Есть ли способ сделать это?

Спасибо.

1 Ответ

1 голос
/ 03 октября 2019

Вы можете попробовать ввести так: inject ('rootStore') (наблюдатель (ваш компонент)) 

    const AdditionalOptionsGroup = inject('rootStore')(observer(({additionalOptionsData, onCheck, labelText, alertEntityName, dsHeadingLabel, store}) => {

    return (
    <FormGroup
       elementType={elementTypes.checkbox}
       value={additionalOptionsData.value}
       checked={additionalOptionsData.checked}
       elementWidth={""}
       onChange={onCheck}
       text={labelText}
       hasLabel={false}
       additionalFormGroupClasses={"noborder"}
    />
    <DuelingSelect
        store={store}
        availableHeading={`Available ${dsHeadingLabel} 
                         (${additionalOptionsData.availableOptions.length})`}
        selectedHeading={`Selected ${dsHeadingLabel} 
                        (${additionalOptionsData.selectedOptions.length})`}
    />
     );
}))
...