Reactjs嵌套的状态和子组件

时间:2016-12-30 14:13:46

标签: javascript reactjs immutable.js

我在具有许多嵌套数据和状态的大型应用程序中使用React / ImmutableJS。一些“嵌套”数据通过props传递给子组件。

子组件处理像局部变量这样的道具(因为道具是不可变的,所以没有突变):它们将新的副本返回到更新其自身状态的父组件。

一个简单的例子:

const user = Immutable.Map({
    name: '...',
    accessRights: Immutable.Map({
        preferences: true,
        contact: false,
       ....
    })
});

class Admin extends Component {
    state = { user };

    render() {
        return <AccessRights
            rights={user.get('accessRights')}
            onRightsChange={newRights =>
                this.setState({ user: user.set('accessRights', newRights) })
            }
        />
    }
}

class AccessRights extends Component {
    render() {
        const { rights, onRightsChange } = this.props;

        return <div>
            {rights.entrySeq().map(([key, value]) =>
                <input
                    key={key}
                    type='checkbox'
                    checked={value}
                    onChange={e => onRightsChange(rights.set(key, e.target.checked))}
                />
            )}
        </div>
    }
}

这有意义吗?

0 个答案:

没有答案