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