Question

我对React非常陌生，因此请原谅我缺乏的知识。我正在使用mobx和REACT。我已经创建了一个类，正在注入rootStore然后导出。

导出后，我正在呼叫一个componenet并传递道具。对于我返回的组件之一，我需要有权访问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，因为它是在上面注入的。

有没有办法做到这一点？

谢谢。

Answer 1

您可以尝试这样注入：inject（'rootStore'）（observer（您的组件））

    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})`}
    />
     );
}))

如何在我的主要组件之外注入rootStore？

1 个答案: