MobX 如何使导入的组件可观察？答案

【问题标题】：MobX how to make imported component observable?MobX 如何使导入的组件可观察？
【发布时间】：2020-02-17 17:04:28
【问题描述】：

在我的代码中，我使用外部库来渲染称为 antd 的表。当我的商店状态发生变化时，我想重新渲染这个导入的组件，但是我无法使这个组件可观察，因为它是导入的组件并且它使用作为道具传递的数据。

它仅在我也在主组件中渲染此存储数据时才有效，因此它触发了重新渲染此子导入组件。但是不想在主组件中返回这些数据我只想在表中返回它。

import React from 'react';
import { Table } from 'antd';

@inject('meetingsStore')
@observer
export default class MeetingNotes extends React.Component {

 render() {
    const meetingsStore = this.props.meetingsStore;
    const { agendaPoints } = meetingsStore.getCurrentMeeting();

    return (
      <Table
        rowKey="id"
        columns={columns}
        dataSource={agendaPoints}
        pagination={false}
      />
    );
  }

}

当我更新商店状态时，我希望这个 Table 组件重新渲染。

【问题讨论】：

标签： reactjs mobx mobx-react

【解决方案1】：

我设法通过使用 mobx toJS 修复它

如果有人遇到类似问题，这里是一个示例工作代码。

import React from 'react';
import { Table } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

@inject('meetingsStore')
@observer
export default class MeetingNotes extends React.Component {

 render() {
    const meetingsStore = this.props.meetingsStore;
    const { agendaPoints } = meetingsStore.getCurrentMeeting();

    return (
      <Table
        rowKey="id"
        columns={columns}
        dataSource={toJS(agendaPoints)}
        pagination={false}
      />
    );
  }

}

【讨论】：

【解决方案2】：

我相信 React 组件可以与 Mobx 一起使用，它们应该为这个库完全重建。 Observer components if they are directly accessed by render。在我的问题中查看类似的问题 Ant-Design Table not rendering when change state in mobx store

【讨论】：