Question

我已经创建了一个内部回调函数，如下所示。

render() {
    const profiles = this
      .props
      .store
      .profiles;
    const renderCell = (rowIndex: number) => {
      console.log('rendering...');

      return <Cell>{profiles[rowIndex].alias}</Cell>;
    };
    return (
      <div className="profileList">
        <Table
          allowMultipleSelection={false}
          numRows={this.props.store.profiles.size}
          isRowHeaderShown={false}
          selectionModes={SelectionModes.ROWS_AND_CELLS}
          isColumnResizable={false}
          isRowResizable={false}
          defaultColumnWidth={1024}
          onSelection={(region) => this.onSelection(region)}
        >
          <Column name="Connection Profiles" renderCell={renderCell.bind(this)}/>
        </Table>
      </div>
    );
  }

从上面的代码中，您可以看到renderCell函数中创建了render()函数。当我更新profile.alias的mbox状态时，不会触发此功能。如果我直接将profile.alias置于render()方法下，则可以正常使用。如何让renderCell对状态变化做出反应？

Answer 1

如果Cell组件不是外部的，您可以使用@observer

来装饰它

如果它是外部的，你可以将你的函数包装在观察者中，如下所示：

const RenderCell = observer(({ rowIndex }) => {
    console.log('rendering...');

    return <Cell>{profiles[rowIndex].alias}</Cell>;
};

在他们的网站上有关于Understanding what MobX reacts to的精彩文档，我建议阅读它，它可以帮助您更好地理解MobX。

如何使我的内部回调函数对mobx状态改变有反应？

1 个答案: