无法添加属性目标，对象不可扩展

Question

这是MarketElement的模块：

import * as React from 'react'
import {Tabs} from "antd";
import MarketEvent from './MarketEvent';
import TakeOutEvent from './TakeOutEvent';
import PaymentEvent from './PaymentEvent';
import FullReduce from './FullReduce'

const TabPane = Tabs.TabPane;

class RouteContent {

public static allList: RouteContent[] = [
    new RouteContent('marketMain'),
    new RouteContent('fullReduce')
];
public id: string;
public name: string;
public target: JSX.Element;

public constructor(id: string) {
    this.id = id;
    this.Content(id);
}


public Content(id:string):any {
    console.log('传到了父组件：',id);
    switch (id) {
        case 'marketMain':
            this.target = <MarketEvent getName={this.Content}/>;
            break;
        case 'fullReduce':
            this.target = <FullReduce getName={this.Content} />;
            break;
    }
}}

export default class MarketElement extends React.Component<any> {


public state = {
    // target: RouteContent.Content('marketMain')
    target: RouteContent.allList[0]

};

public getChangePage = (passName: string) => {
    this.setState({
        name: passName
    })
};

public componentWillMount(){
    console.log('componentWillMount MarketElement');
}

public componentDidMount(){
    console.log('componentDidMount MarketElement');
}



public render(){
    return(
        <div>
            <Tabs defaultActiveKey="0">
                <TabPane tab="活动管理" key="0">{this.state.target.target}</TabPane>
                <TabPane tab="外卖设置" key="1"><TakeOutEvent/></TabPane>
                <TabPane tab="支付设置" key="2"><PaymentEvent/></TabPane>
            </Tabs>
        </div>
    )
}
}

这是MarketEvent的模块：

import * as React from 'react';

import './MarketEvent.less'

interface MarketEventProps {
   getName: any;
}

export default class MarketEvent extends React.Component<MarketEventProps,any> {

public constructor(props:any) {
    super(props);
}

public componentWillMount(){
    console.log('componentWillMount MarketEvent');
}

public componentDidMount(){
    console.log('componentDidMount MarketEvent');
}

public refName = (name:string) => {
    this.props.getName(name);
};

public render(){
    return(
        <div className="market_event">
            <div className="market_top">
                营销活动
            </div>
            <div className="market_body">
                <ul className="market_ul">
                    <li onClick={this.refName.bind(this,'fullReduce')}><a href="javascript:;"><span className="l1">减</span>
                        <div className="event_box">
                            <h2>店铺满减</h2>
                            <i>促销</i><i>客单价</i>
                            <p>下单满足条件可享受减免</p>
                        </div>
                    </a></li>
                    <li><a href="javascript:;"><span className="l2">店</span>
                        <div className="event_box">
                            <h2>店铺代金券</h2>
                            <i>拉新</i><i>引流</i>
                            <p>进店时可领取店铺专用代金券</p>
                        </div>
                    </a></li>
                    <li><a href="javascript:;"><span className="l3">促</span>
                        <div className="event_box">
                            <h2>折扣促销</h2>
                            <i>新品</i><i>爆款</i>
                            <p>下单满足条件可享受减免</p>
                        </div>
                    </a></li>
                </ul>
            </div>
        </div>
    )
}

}

这是FullReduce的模块：

import * as React from 'react';
import {Button} from "antd";

interface FullReduceProps {
    getName: any
}

export default class FullReduce extends React.Component<FullReduceProps,any> {

public componentWillMount(){
    console.log('componentWillMount  FullReduce');

}

public componentDidMount(){
    console.log('componentDidMount  FullReduce')
}
public refName = (name:string) => {
    this.props.getName(name);
};

public render(){
    return(
        <div>
            <Button htmlType='button' onClick={this.refName.bind(this,'marketMain')}>返回</Button>
            已经进入了店铺满减页面了
        </div>
    )
}

}

我想要实现的效果是在MarketEvent模块中点击这一项，然后切换到相应列表项的内容，即FullReduce的模块。然后从FullReduce返回到上一页。但是当我点击一个项目时，它会报错：无法添加属性目标，对象不可扩展;我不知道为什么，请帮助我，谢谢

Answer 1

Content方法的目的（方法名称不应以大写字母开头）似乎正在改变target类的RouteContent成员。

由于您将此方法作为回调传递，因此需要将其绑定在`RouteContent'中：

class RouteContent {

    public id: string;
    public name: string;
    public target: JSX.Element;

    public constructor(id: string) {
        this.id = id;
        this.Content = this.Content.bind(this);
        this.Content(id);
    }

    ....

}

这样，this进入Content将始终引用所需的RouteContent实例。并且Javascript不会抱怨Object不可扩展。您的代码可能有关于组件状态管理的其他问题，但它将解决问题。