Question

我正在学习技巧，但这也可能涉及React。

说我有一个复选框列表，每个复选框都有一些其他HTML，例如（Typescript）：

export class MyCheckbox extends Component<Props, State> {

    render(props, state) {
        return (
            <div>
                <input
                    type="checkbox"
                    checked={state.checked}
                    onChange={props.onUpdate}
                    />
                <div>
                    {props.name}
                    <!-- other GUI elements -->
                </div>
            </div>
        );
    }
}

然后，这些组件将在更高级别的组件中使用，例如：

render(props, state) {

    return (
        <div class={style.finding}>
            <form>
                { this.elements
                    .map(el => (
                        <MyCheckbox name={el.name} checked={el.checked} onUpdate={this.onUpdate()} />
                    ))
                }
            </form>
        </div>        
    </div>
);

如您所见，更高级别的组件告诉复选框是否应选中它。因此，复选框的Props对象具有属性checked，该属性确定复选框可见后是否应对其进行检查。

但是，我们还需要checked上的State属性，因为用户可能会单击该复选框并进行更新。因此Props.checked的意思是“初始检查”，而State.checked的意思是“当前检查”。

但是，如果用户单击复选框，则onUpdate方法将更新上级组件上的this.elements模型。这将触发更高级别的组件上的render()，这又会将新的Props.checked传递到复选框。

这意味着复选框的Props会像状态一样。当用户单击复选框时，它将更新，然后将新状态传递到该复选框。

那正常吗？还是我的设计有问题？子组件根本不需要状态吗？

Answer 1

通常的方法是应用有状态父级和无状态子级模式。

在您的情况下， MyCheckbox 应该是无状态的（不应包含checked状态变量），并且选中的值应该是一个属性。

检查值的状态应由父状态处理。

export class MyCheckbox extends Component<Props, State> {
    render(props, state) {
        return (
            <div>
                <input
                    type="checkbox"
                    checked={props.checked}
                    onChange={props.onUpdate} />
                <div>
                    {props.name}
                    <!-- other GUI elements -->
                </div>
            </div>
        );
    }
}

父母：

export class Parent extends Component<Props, State> {
    ...
    render(props, state) {
        return (
            <div class={style.finding}>
                <form>
                    { this.elements
                        .map(el => (
                            <MyCheckbox name={el.name} checked={this.isChecked(el)} onUpdate={this.onUpdate()} />
                        ))
                    }
                </form>
            </div>        
        </div>
    );

    isChecked(elem) {
        // use this.state to verify to return a boolean representing the checkbox checked state
    }
}

使组件无状态总是好事。具有prop和代表组件相同方面的状态值有点难看。

希望这会有所帮助

何时使用道具以及何时在Preact子组件中声明状态

1 个答案: