Reactjs 有没有办法让typescript泛型道具不再是只读的？

我是React和Typescript方面的新手。在AlertDismissable类中，我正在设置请求完成时显示的属性。我使用了这个示例，并对其进行了一些更改

根据回复，我会更改AlertDismissable的内容和样式

当用户单击“隐藏”按钮时，我试图将其“显示”属性设置为false。我将状态与属性绑定，这就是我试图设置道具的原因。然而，编译器抛出

TS2540:无法分配给“show”，因为它是常量或只读属性。（handleDismiss方法）

一般道具默认是只读的。还有其他方法可以让它工作吗

这是我的可解雇tsx

import * as React from 'react'
import { Alert, Button } from 'react-bootstrap';
interface AlertDismissableState {
    show: boolean;
    style: string;
}
export default class AlertDismissable extends React.Component<AlertDismissableState, AlertDismissableState> {

    constructor(props: any, context: any) {
        super(props, context);

        this.handleDismiss = this.handleDismiss.bind(this);
        this.handleShow = this.handleShow.bind(this);

        this.state = {
            show: this.props.show,
            style: this.props.style
        };

    }
        handleDismiss() {
 this.props.show=false;        
}

    handleShow() {
        this.props.show=true;
    }

    render() {
        if (this.props.show && this.props.style == "Success") {
            return (
                <Alert bsStyle="success">
                    <p>
                        Ok
                    </p>
        <Button onClick={this.handleDismiss}>Hide Alert</Button>

                </Alert>
            );
        }
        if (this.props.show && this.props.style == "Danger") {
            return (
                <Alert bsStyle="danger"> 
                    <p>
                        Failed
                    </p>
        <Button onClick={this.handleDismiss}>Hide Alert</Button>

                </Alert>
            );
        }
        return (<div />);
    }
}

import*作为来自“React”的React
从“react bootstrap”导入{Alert，Button}；
接口AlertDismissableState{
显示：布尔；
风格：弦乐；
}
导出默认类AlertDismissable扩展React.Component{
构造函数（道具：任意，上下文：任意）{
超级（道具、背景）；
this.handleDismiss=this.handleDismiss.bind（this）；
this.handleShow=this.handleShow.bind（this）；
此.state={
表演：这个。道具。表演，
风格：这个。道具。风格
};
}
handleDismiss（）{
this.props.show=false；
}
handleShow（）{
this.props.show=true；
}
render（）{
if（this.props.show&&this.props.style==“成功”）{
返回(

好啊

隐藏警报
);
}
如果（this.props.show&&this.props.style==“危险”）{
返回(

失败

隐藏警报
);
}
返回（）；
}
}

这是我的组件，包括AlertDismissable类。为了简洁，我删除了一些代码

export default class UploadContainer extends React.Component<{}, UploadContainerState> {
uploadFile(event: any) {
        fetch("ProposalData/UploadFile", {
...
        })
            .then(handleErrors)
            .then(function (response) {
                that.setState({ alertVisible: true, style: "Success" });
            }).catch(function (error) {
                that.setState({ alertVisible: true, style: "Danger" });            });
}

render() {
        return (
            <div>

                <AlertDismissable show={this.state.alertVisible} style={this.state.style} />
</div>)}

导出默认类UploadContainer扩展React.Component{
上载文件（事件：任意）{
获取（“ProposalData/UploadFile”{
...
})
.然后（handleErrors）
.然后（功能（响应）{
setState（{alertVisible:true，style:“Success”}）；
}).catch（函数（错误）{
setState（{alertVisible:true，style:“Danger”}）；}）；
}
render（）{
返回(
)}

打字稿：2.9.1

反应：“^16.4.0”

反应引导程序“^0.32.1”

---

反应dom:“^16.4.0”，

您问错了问题。我将回答另一个问题，但答案如下：

在React中，您应该永远不要尝试更改

道具
。属性是从父组件传递的内容。如果要更改属性，您必须转到父组件并更改传递给
AlertDismissable
的内容

实际上，您应该将函数类型的属性
onDismiss
传递给
AlertDismissable
，并调用
this.props.onDismiss（）
，而不是
this.props.show=false
。然后您需要更改该函数中
UploadContainer
的
状态

还请注意，您的
AlertDismissable
类根本不需要维护
状态
，它应该直接使用
道具

我自己不是typescript开发人员，但应该是这样的：

interface AlertDismissableState {
  show: boolean;
  style: string;
  onDismiss: () => void;
}

然后就是：

<Button onClick={this.props.onDismiss}>
  Hide Alert
</Button>

您没有传递标志并呈现一个空的
而是问了一个错误的问题。我将回答另一个问题，但答案如下：

在React中，您应该永远不要尝试更改
道具
。属性是从父组件传递的内容。如果要更改属性，您必须转到父组件并更改传递给
AlertDismissable
的内容

实际上，您应该将函数类型的属性
onDismiss
传递给
AlertDismissable
，并调用
this.props.onDismiss（）
，而不是
this.props.show=false
。然后您需要更改该函数中
UploadContainer
的
状态

还请注意，您的
AlertDismissable
类根本不需要维护
状态
，它应该直接使用
道具

我自己不是typescript开发人员，但应该是这样的：

interface AlertDismissableState {
  show: boolean;
  style: string;
  onDismiss: () => void;
}

然后就是：

<Button onClick={this.props.onDismiss}>
  Hide Alert
</Button>

不要传递标志并为尝试实现此示例或类似模式的用户呈现空的
注释。OnDismiss必须定义如下。接口AlertDismissableState{OnDismiss？：（）=>void；}如果将其定义为函数，则会出现以下错误。属性“onClick”的类型不兼容。类型“function”不可分配给类型“EventHandler | undefined”。@erhan355已更新，正如我所说，我只是一名JS开发人员，我不知道类型脚本：）是的，我知道，非常感谢您的回答。我为其他用户添加了注释，以完全支持benefit from answer.。（适用于尝试实现此示例或类似模式的用户。OnDismiss必须定义为以下内容。接口AlertDismissableState{OnDismiss？：（）=>void；}如果将其定义为函数，则会出现以下错误。属性“onClick”的类型不兼容。类型“function”不可分配给类型“EventHandler | undefined”。@erhan355已更新，正如我所说，我只是一名JS开发人员，我不知道类型脚本：）是的，我知道，非常感谢您的回答。我为其他用户添加了注释，以完全支持b从答案中获益