Javascript React.js：如何将道具传递给组件？

我想使API调用可重用，并在其他组件中使用它的功能。我正在Hook/index.js组件中获取API。然后我想在另一个组件中迭代从API获得的数据，将其作为参数并在其他组件中使用
我有一个Flag/index.js组件用于Flag（img）并希望获取图像的url作为参数，并在Flag/index.js组件中使用。
任何帮助都将不胜感激。
在Hook/index.js中I获取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]
}

import React，{useState}来自“React”；
从“/components/Header”导入标题；
从“/components/SearchBar”导入搜索栏；
从“/components/Flag”导入标志；
从“/Hooks”进口使用国；
导入“/App.scss”；
导出默认函数App（）=>{
const[data，error]=useCountries（）；
返回(
{数据&&
data.map（（国家）=>(
如果在这里更改为flag={country.flag}，我会在浏览器中看到链接
{country.name}
{国家人口}
{国家地区}
{country.languages.map（（语言，语言索引）=>(
{language.name}
))}
))}
);
返回[数据，错误]
}

当然，我的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>
  );
};

从“React”导入React；
导入“/flag.scss”；
导出默认函数标志（{Flag}）{
返回(
);
};

如何制作工作搜索栏。现在它在控制台中表示未定义

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>
  );
};

import React，{useState}来自“React”；
导入“/SearchBar.scss”；
导出默认函数搜索栏（{data}）{
const[search，setSearch]=useState（“”）；
功能手柄更改（e）{
设置搜索（如目标值）；
} 
console.log（数据）
返回(
{data&&data.filter（（item）=>item.name.toLowerCase（）.includes（search））}
);
};

您需要在应用程序组件中使用标志组件

    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]
    }         

import React，{useState}来自“React”；
从“/components/Header”导入标题；
从“/components/SearchBar”导入搜索栏；
从“/components/Flag”导入标志；
从“/Hooks”进口使用国；
导入“/App.scss”；
导出默认值（）=>{
const[data，error]=useCountries（）；
返回(
{数据&&
data.map（（国家）=>(
{country.name}
{国家人口}
{国家地区}
{country.languages.map（（语言，语言索引）=>(
{language.name}
))}
))}
);
返回[数据，错误]
}         

您需要在应用程序组件中使用标志组件

    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]
    }         

import React，{useState}来自“React”；
从“/components/Header”导入标题；
从“/components/SearchBar”导入搜索栏；
从“/components/Flag”导入标志；
从“/Hooks”进口使用国；
导入“/App.scss”；
导出默认值（）=>{
const[data，error]=useCountries（）；
返回(
{数据&&
data.map（（国家）=>(
{country.name}
{国家人口}
{国家地区}
{country.languages.map（（语言，语言索引）=>(
{language.name}
))}
))}
);
返回[数据，错误]
}         

1

我不完全确定这是否回答了这个问题，但要在中添加抽象标志类，只需更改以下内容：

<img src={country.flag} alt="" width="80px" />

为此：

<Flag flag={country.flag} />

1

我不完全确定这是否回答了这个问题，但要在中添加抽象标志类，只需更改以下内容：

<img src={country.flag} alt="" width="80px" />

为此：

<Flag flag={country.flag} />

只需使用

在线查看：

只需使用

---

在线查看：

hey@Nhut Dinh Ba谢谢，我不知道这是可能的，还有一个问题。如何让“搜索栏”工作？。我把部件放在上面。现在它在控制台中还没有定义？@Greg:您可以使用hey@Nhut Dinh it throws一个错误“error:对象作为React子对象无效（找到：带有键的对象{姓名、顶级域名、字母2码、字母3码、呼叫码、大写、拼法、地区、次区域、人口、拉丁语、人名、地区、基尼、时区、边界、国家名、数字码、货币、语言、翻译、旗帜、地区集团、cioc}）。如果您想呈现一组子项，请改用数组。@格雷：这意味着数据不是数组。您可以检查useCountries返回的数据的值。嘿@Nhut Dinh Ba谢谢，我不知道这是可能的。还有一个问题。如何制作“搜索栏”“工作？我把组件放在上面。现在它在控制台中还没有定义？@Greg:你可以使用hey@Nhut Dinh it throws一个错误”错误：对象作为React子对象无效（找到：带有键的对象{姓名、顶级域名、字母2码、字母3码、呼叫码、大写、拼法、地区、次区域、人口、拉丁语、人名、地区、基尼、时区、边界、国家名、数字码、货币、语言、翻译、旗帜、地区集团、cioc}）。如果要呈现子项集合，请改用数组。@灰色：这表示数据不是数组。您可以检查useCountri返回的数据值是多少