Question

我是React和Typescript的新手。在AlertDismissable类中，我在请求完成时设置了show的属性。我使用了这个示例并稍微改了一下。

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

当用户点击隐藏按钮时，我试图将其show属性设置为false。我已经绑定了具有属性的状态，这就是为什么我要设置props.However，编译器抛出

TS2540：无法分配到＆＃39;显示＆＃39;因为它是常量或只读属性。（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类。我删除了一些brevitiy的代码。

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

做出反应：＆＃34; ^ 16.4.0＆＃34;

react-bootstrap：＆＃34; ^ 0.32.1＆＃34;

react-dom：＆＃34; ^ 16.4.0＆＃34;，

Answer 1

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

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

实际上，您应该将类型为onDismiss的属性AlertDismissable传递给this.props.onDismiss()并调用this.props.show = false而不是state。然后，您需要更改该函数中UploadContainer的{{1}}。

另请注意，您的AlertDismissable课程根本不需要维护state，而应直接使用props。

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

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/>。

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

1 个答案: