代码之家 › 专栏 › 技术社区 › erhan355

有没有办法使typescript泛型属性不是只读的?

typescript reactjs

erhan355 · 技术社区 · 8 年前

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

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

当用户单击“隐藏”按钮时,我试图将其Show属性设置为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 />);
    }
}

这是我的组件,其中包括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”,

1 回复 | 直到 8 年前

Sulthan 8 年前

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

作为回应你应该从未尝试改变 props . 属性是从父组件传递的内容。如果要更改属性,则必须转到父组件并更改传递给的内容 AlertDismissable .

实际上,你应该传递一个属性 onDismiss 类型函数到 警戒解除 打电话来 this.props.onDismiss() 而不是 this.props.show = false . 那你得换个 state 属于 UploadContainer 在那个函数中。

还要注意 警戒解除 类不需要维护 状态 它应该使用 道具 直接的。

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

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 })}
/>

顺便说一下,渲染 警戒解除 组件应该隐藏的时间。你可以考虑:

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

而不是传递标志并将 <div/> .