反应孩子的状态与道具

Question

我一直在研究React道具和状态，目前我正在使用Redux。我一直在尝试找出如何使我的组件可重用，而特定组件却有问题。

基本上，它的功能类似于gmail，并且旁边有复选框，并且功能会根据所选内容显示，您还可以传入按钮以显示功能。但是我在选择方面有问题。因此，为了使组件正常工作，我必须具有选定的属性，但我不希望道具中使用此属性，因为它仅与该组件有关，其他所有内容都将在道具中。因为我知道您不应该在组件内更改道具，所以该如何处理？

下面是一个示例，如果我仅使用状态并且其不可重用：

this.state = {
        selectAll: false,
        list: [
            {
                id: 1,
                description: "Description 1",
                selected: false
            },
            {
                id: 2,
                description: "Description 2",
                selected: true
            },
            {
                id: 3,
                description: "Description 3",
                selected: false
            },
        ],
        listDetails: {
            start: 1,
            end: 50,
            currentPage: 1,
            lastPage: 2,
        },
        toolbarActions: [
            {
                icon: "edit",
                useOnMultiple: true,
                use: true,
                handleFunctionSingle: this.handleActionsFunction.bind(this, "Edit Single"),
                handleFunctionMultiple: this.handleActionsFunction.bind(this, "Edit Multiple"),
            },
            {
                icon: "trash",
                useOnMultiple: true,
                use: true,
                handleFunctionSingle: this.handleActionsFunction.bind(this, "Delete Single"),
                handleFunctionMultiple: this.handleActionsFunction.bind(this, "Delete Multiple"),
            }
        ],
    }

因此，在此示例中，除了selectAll状态和列表对象中的selected以外，所有内容都将传入。

这是传入的道具

        list: [
            {
                id: 1,
                description: "Description 1",
            },
            {
                id: 2,
                description: "Description 2",
            },
            {
                id: 3,
                description: "Description 3",
            },
        ],
        listDetails: {
            start: 1,
            end: 50,
            currentPage: 1,
            lastPage: 2,
        },
        toolbarActions: [
            {
                icon: "edit",
                useOnMultiple: true,
                use: true,
                handleFunctionSingle: this.handleActionsFunction.bind(this, "Edit Single"),
                handleFunctionMultiple: this.handleActionsFunction.bind(this, "Edit Multiple"),
            },
            {
                icon: "trash",
                useOnMultiple: true,
                use: true,
                handleFunctionSingle: this.handleActionsFunction.bind(this, "Delete Single"),
                handleFunctionMultiple: this.handleActionsFunction.bind(this, "Delete Multiple"),
            }
        ],