有没有办法使打字稿泛型道具不只读？

Question

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

根据响应，我更改 AlertDismissable 的内容和样式。

当用户单击隐藏按钮时，我尝试将其显示属性设置为 false。我已将状态与属性绑定在一起，这就是我尝试设置 props 的原因。但是，编译器会抛出异常

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

看来通用道具默认是只读的。还有其他方法可以使其工作吗？

这是我的 AlertDismissable 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 />);
    }
}

这是我的组件，其中包含 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>)}

打字稿：2.9.1

反应：“^16.4.0”

反应引导：“^0.32.1”

反应-dom：“^16.4.0”，

Answer 1

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

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

onDismiss实际上，您应该将function 类型的属性传递给AlertDismissableand callthis.props.onDismiss()而不是this.props.show = false。然后您需要更改该函数中的stateof UploadContainer。

另请注意，您的类根本AlertDismissable不需要维护，应该直接使用。stateprops

我自己不是打字稿开发人员，但它应该是这样的：

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

然后就：

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

并在父组件中：

<AlertDismissable
  show={this.state.alertVisible}
  style={this.state.style}
  onDismiss={() => this.setState({ alertVisible: false })}
/>

AlertDismissable顺便说一句，当组件应该隐藏时渲染它没有多大意义。你可以考虑：

{this.state.alertVisible && (
  <AlertDismissable
     style={this.state.style}
     onDismiss={() => this.setState({ alertVisible: false })}
  />
)}

而不是传递标志并渲染一个空的<div/>.