如何在React过滤组件中为过滤项绑定对应外部网站链接？

你只需要将数组中对应的link字段值绑定到<a>标签的href属性上即可，当前代码里的href是空字符串，所以无法实现跳转。

修改核心代码片段 #

{filterItems.map((wI) => {
    return <li><a href={wI.link} target="_blank">{wI.title}</a></li>
})}

完整修改后组件代码 #

import React, { useState } from "react";
import "./SearchBarStyle.css"

const SearchBar = () => {

    const waterInfo = [
        {title: "About Water", link:"https://en.wikipedia.org/wiki/Water"},
        {title: "Water (Molecule)", link: "https://en.wikipedia.org/wiki/Properties_of_water"},
        {title: "Water (Chemistry)", link: "https://pubchem.ncbi.nlm.nih.gov/compound/Water"}
    ]

    const [input, setInput] = useState("")

    const HandleInput = (event) => {
        setInput(event.target.value)
    }

    const DeleteInput = () => {
        setInput("")
    }

    const filterItems = waterInfo.filter((wI) => { 
        return wI.title.includes(input)
    })

    return(
        <div>
            <h2 className="search-anything-header">Search anything about water!</h2>
            <div className="inputs-holder">
                <input type="text" value={input} onChange={HandleInput} placeholder="About Water?" className="searchbar"/>
                <button onClick={DeleteInput} className="delete-button"><b>✖</b></button>

            </div>
            <ul className="results">
                {filterItems.map((wI) => {
                    // 增加key属性避免React警告，同时绑定正确的href值
                    return <li key={wI.link}><a href={wI.link} target="_blank">{wI.title}</a></li>
                })}
            </ul>
            
        </div>
    )
}

export default SearchBar

额外提示 #

给列表项添加key属性是React的要求，这里用每个项唯一的link值作为key，可以避免渲染时的警告。

内容的提问来源于stack exchange，提问作者Junsoo