Невозможно добавить целевое свойство, объект не расширяется

это модуль 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.info('传到了父组件:',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.info('componentWillMount MarketElement');
}

public componentDidMount(){
    console.info('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.info('componentWillMount MarketEvent');
}

public componentDidMount(){
    console.info('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.info('componentWillMount  FullReduce');

}

public componentDidMount(){
    console.info('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 на предыдущую страницу. Но когда я нажимаю на один элемент , он сообщит об ошибке : Невозможно добавить цель свойства, объект не расширяется ; Я не знаю почему, пожалуйста, помогите мне спасибо Невозможно добавить целевое свойство, объект не расширяется

🤔 А знаете ли вы, что...
С React можно создавать одностраничные приложения (SPA), не перезагружая страницу.


2 295
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 не является расширяемым. В вашем коде могут быть другие проблемы, связанные с управлением состоянием компонентов, но это решит заданную проблему.