[英]React.js: How to pass props to components?
我想讓API 調用可重用並在其他組件中使用它的功能。 我正在Hook/index.js組件中獲取API 。 然后我想遍歷從另一個組件中的API 獲取的數據,將其作為參數並在其他組件中使用它。
我有一個用於flag(img)的Flag/index.js組件,並希望獲取圖像的 url 作為參數並在Flag/index.js組件中使用。
任何幫助將不勝感激。
在Hook/index.js我獲取API
import React, { useState, useEffect } from "react";
import "./hook.scss";
export default function Hook(){
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [search, setSearch] = useState("");
const fetchData = () => {
fetch("https://restcountries.eu/rest/v2/all")
.then((res) => res.json())
.then((result) => setData(result))
.catch((err) => console.log("error"));
};
useEffect(() => {
const searchResult = data && data.filter((item) => item.name.toLowerCase().includes(search));
setSearch(searchResult);
}, []);
useEffect(() => {
fetchData();
}, []);
return [data, error];
}
在 App.js 中,我通過 API 數據進行映射
import React, { useState }from "react";
import Header from "./components/Header";
import SearchBar from "./components/SearchBar";
import Flag from "./components/Flag";
import useCountries from "./Hooks";
import "./App.scss";
export default function App () => {
const [data, error] = useCountries();
return (
<div className="App">
<SearchBar />
<Header />
{data &&
data.map((country) => (
<div className="CountryList" key={country.name}>
<div className="CountryListImg">
<img src={country.flag} alt="" width="80px" /> if change here to flag={country.flag} I see link in browser
</div>
<div className="countryName">{country.name}</div>
<div className="population">{country.population}</div>
<div className="region">{country.region}</div>
<div>
{country.languages.map((language, languageIndex) => (
<div key={languageIndex}>{language.name}</div>
))}
</div>
</div>
))}
<useCountries />
</div>
);
return [data, error]
}
而我的Flag/index.js組件當然不起作用
import React from "react";
import "./flag.scss";
export default function Flag({flag}) {
return (
<div className="">
<img src={flag} alt="" width="80px" />
</div>
);
};
如何制作工作搜索欄。 現在它在控制台中顯示未定義
import React, {useState} from "react";
import "./SearchBar.scss";
export default function Searchbar({data}) {
const [search, setSearch] = useState("");
function handleChange(e) {
setSearch(e.target.value);
}
console.log(data)
return (
<div className="SearchBar">
<input
className="input"
type="text"
placeholder="search country ..."
value={data}
onChange={handleChange}
/>
{data && data.filter((item) => item.name.toLowerCase().includes(search))}
</div>
);
};
您需要在 App 組件中使用 Flag 組件
import React, { useState }from "react";
import Header from "./components/Header";
import SearchBar from "./components/SearchBar";
import Flag from "./components/Flag";
import useCountries from "./Hooks";
import "./App.scss";
export default () => {
const [data, error] = useCountries();
return (
<div className="App">
<SearchBar />
<Header />
{data &&
data.map((country) => (
<div className="CountryList" key={country.name}>
<div className="CountryListImg">
<Flag flag={country.flag}/>
</div>
<div className="countryName">{country.name}</div>
<div className="population">{country.population}</div>
<div className="region">{country.region}</div>
<div>
{country.languages.map((language, languageIndex) => (
<div key={languageIndex}>{language.name}</div>
))}
</div>
</div>
))}
<useCountries />
</div>
);
return [data, error]
}
1
我不完全確定這是否回答了問題,但是要在您中添加抽象的 Flag 類,只需更改以下內容:
<img src={country.flag} alt="" width="80px" />
對此:
<Flag flag={country.flag} />
只需使用<Flag flag={country.flag} />
在線查看: https : //stackblitz.com/edit/stackoverflow-63831710?file=src/App.js
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.