meteor - ReactJS + Tracker：更新父状态

Question

我在自动运行和设置父状态时遇到问题。例如，我的类别项目也有子类别项目：

1. 甲类

   • 子 1
   • 子 2

2. B类

   • 子 3
   • 子 4

现在，如果我访问 Sub 4，B 类和 Sub 4 的状态应该是激活的。

在我的子组件中，我的代码如下所示：

export class CategorySubItem extends Tracker.Component {

constructor(props) {
    super(props);

    this.state = {
        active: false
    };

    this.autorun(() => {
        if(LayoutGlobals.get().categoryId == this.props.doc.id) {
            this.setState({active:true});
            this.props.parent.setState({active:true});
        } else {
            this.setState({active:false});
            this.props.parent.setState({active:false});
        }
    });




}

调用子类别项：

<CategorySubItem doc={cat} key={cat.id} parent={this}/>

LayoutGlobals 是一个反应变量。当我设置我父母的状态时，我最终陷入了无限循环的重新渲染。处理这个问题的正确方法是什么？

Answer 1

永远不要设置父组件的状态。所有组件都应该只设置自己的状态。为您的组件编写一个函数来Category决定它是否处于活动状态。

不过我会尽量避免autorun。只需将LayoutGlobals.get().categoryId组件树作为道具传递，并实现您自己的componentWillReceiveProps功能。这样你就可以让 React 最小化重新评估。