Question

我是编程新手。我要实现以下内容，

当我单击列表项时，我想导航到另一页。

我要做什么？我在侧面板中有列表项。当我单击列表项时，它应该导航到另一页。

所以我有一个listpanel组件，它呈现了listitem组件。在单击列表项上，应基于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方法返回的值存储到变量链接中的方式存在问题。因为get_type1_link返回jsx（链接）。有人可以帮助我吗？

Answer 1

那是因为link是一个对象，大概是一个字符串，尽管没有get_link帮助器很难分辨。 onClick需要回调。要与浏览器进行交互，您应该使用javascript窗口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所示。

如何使用react将链接存储到变量中？

1 个答案: