Reactjs MobX:@observale-won'；唤起渲染

我试图构建一个视图，如果单击某个元素，就会显示子节点。只要我调用

this.forceUpdate（），一切正常在我的onClick事件中。我想做的是将我的数据作为一个可观察的数组，以便它中的任何更改都会引发
render（）
。然而，为了让事情开始变得简单，我声明了一个
@observable boolean
，并切换这些值以引发渲染。但是，当值更改时，不会调用
render（）
。我做错了什么

我的代码：

@observer
export class TreeView extends React.Component<RouteComponentProps<{}>> {
    @observable toggle = false;
    constructor(props: any) {
        super(props);
    }

    public renderChildrenNodes = (e) => {
        const id = e.currentTarget.id;
        if(!id) {
            return;
        }
        let item: INode = this.props.data.find(item => item.Name === id );
        if(item) {
            item.Show = !item.Show;
            this.toggle = !this.toggle;
            // USE MOBX
            // this.forceUpdate();
        }
    }

    public render() {
        const data = this.props.data;
        if (!data) {
            return null;
        }
        return(
            <ul className="no-padding">
                {data.map((item,itr) => {
                    return (
                        <li className="list-style" key={itr}>
                            <div id={item.Name} className="box" onClick={this.renderChildrenNodes}>
                                {item.Name}
                            </div>
                            {item.Show ? <TreeView data={item.ChildNodes} /> : null}
                        </li>
                    );
                })}
            </ul>
        );
    }
}

@observer
导出类TreeView扩展React.Component{
@可观察开关=假；
构造器（道具：任何）{
超级（道具）；
}
公共renderChildrenNodes=（e）=>{
const id=e.currentTarget.id；
如果（！id）{
返回；
}
让item:INode=this.props.data.find（item=>item.Name==id）；
如果（项目）{
item.Show=！item.Show；
this.toggle=！this.toggle；
//使用MOBX
//这个.forceUpdate（）；
}
}
公共渲染（）{
const data=this.props.data；
如果（！数据）{
返回null；
}
返回(

{data.map（（项目，itr）=>{
返回(

{item.Name}
{item.Show？：null}

);
})}

);
}
}
mobx仅当您的
render
函数在某处引用可观测值时才会触发重新渲染

下面是一篇关于如何将mobx用于组件本地状态的老文章：