我是编程新手。我想实现下面的代码:
当我单击列表项时,我想导航到另一个页面。
我要做的是什么?我在侧面板中有列表项。当我单击列表项时,它应该导航到另一个页面。
因此,我有一个用于呈现listitem组件的listpanel组件。在点击列表项时,根据item_data_type,它应该指向从get_type1_link或get_type2_link方法获得的链接。但是,它返回一个对象。我不确定我在哪里弄错了。
class ListPanel extends react.purecomponent {
get_type1_link = () => {
const item_data = this.props.item_data;
const itemss = this.props.items;
const {itemname, item_id} = item_data.properties;
const filtered_item = items && items.find(item => item.id ===
item_id);
const item_name = (filtered_item) ? filtered_item.itemname :
(itemname ? itemname : item_id);
if (filtered_item) {
return (<Link to={`/someurl/${item_data.properties.item_id}`}>
{item_name}</Link>);
} else {
return <span>{item_name}</span>;
}
};
get_type1_link = () => {
const item_data = this.props.item_data;
let link;
switch (item_data.type) {
case 'type1':
link = this.get_type1_link();
break;
case 'type2':
link = this.get_type2_link();
break;
default:
return link=window.location.href;
}
return link;
};
render = () => {
const list_item = this.props.;
return (
<ListItem
key={list_item.id}
text={this.get_text}
link={this.get_link}/>
);
}
class ListItem extends react.purecomponent {
render = () => {
<li onClick={props.link}>
<div className="text">
{this.props.text}
</div>
</li>
}
}
我认为我将从get_type1_link方法返回的值存储到变量link的方式有问题。因为get_type1_link返回一个jsx (链接)。有没有人能帮我一下谢谢。
发布于 2019-08-14 21:37:03
这是因为link是一个对象,可能是一个字符串,尽管没有get_link辅助函数很难辨别。onClick想要回调。要与浏览器交互,您应该使用javascript window api https://developer.mozilla.org/en-US/docs/Web/API/Window。
因此,要更改窗口,请将<li onClick={props.link}>
更改为<li onClick={{() => window.location.href = props.link}}>
,如下所示的How to get the browser to navigate to URL in JavaScript。
https://stackoverflow.com/questions/57502281
复制