在另一个文件中使用组件中的道具

Question

如您所知，我是 React 的新手。我试图搜索 Whosebug 和 google 这个，但我找不到任何可以回答这个问题的东西。

我正在创建这个旅行评论页面。我将表单保存到 Firebase 数据库并使用组件显示它。但是，我只想显示一个国家的名称，但我无法做到这一点。我很确定我必须将它作为道具传递，但我不知道该怎么做。

我想要的是，使用这个组件并在组件中决定要查看什么。

如果我想在其他一些 .js 文件中使用这个组件，我想做这样的事情：并仅显示字段中的数据 countryName.I 我将使用国家/地区名称作为列表，这就是为什么我只想挑出名称。

我玩过道具，但我无法理解它。也许有人可以帮忙？

谢谢。

这是我用作组件的功能：

const CountryList = () => {
    const countries = useCountries()
    return (
        <div className="countries">      
                {countries.map((country) =>
                    <div key={country.id}>
                        <div className="time-entry">
                            Name of review: {country.revName} <br/>
                             Name of Country: {country.countryName}<br/>
                            Destination 1: {country.dest1}<br/>
                            Destination 2: {country.dest2}<br/>
                            Destination 3: {country.dest3}<br/>
                            Beer price: {country.beerPrice}<br/>
                            Food price: {country.foodPrice}<br/>
                            Hostel price: {country.hostelPrice}<br/>
                            Review: {country.review}<br />
                            <img src={country.url} alt="no-img" />
                        </div>
                    </div>
                )}
        </div>
    )
}

Answer 1

超级简单的方法可能是传递一个 "fields" 数组作为道具，然后有条件地渲染 UI。如果 displayFields 数组包含国家名称属性则呈现 "field".

示例：

const CountryList = ({ displayFields = [] }) => {
  const countries = useCountries();
  return (
    <div className="countries">
      {countries.map(country => (
        <div key={country.id}>
          <div className="time-entry">
            {displayFields.includes("revName") && (
              <div>Name of review: {country.revName}</div>
            )}
            {displayFields.includes("countryName") && (
              <div>Name of Country: {country.countryName}</div>
            )}
            {displayFields.includes("dest1") && (
              <div>Destination 1: {country.dest1}</div>
            )}
            {displayFields.includes("dest2") && (
              <div>Destination 1: {country.dest2}</div>
            )}
            {displayFields.includes("dest3") && (
              <div>Destination 1: {country.dest3}</div>
            )}
            {displayFields.includes("beerPrice") && (
              <div>Beer price: {country.beerPrice}</div>
            )}
            {displayFields.includes("foodPrice") && (
              <div>Food price: {country.foodPrice}</div>
            )}
            {displayFields.includes("hostelPrice") && (
              <div>Hostel price: {country.hostelPrice}</div>
            )}
            {displayFields.includes("review") && <div>Review: {country.review}</div>}
            {displayFields.includes("imgUrl") && <img src={country.url} alt="no-img" />}
          </div>
        </div>
      ))}
    </div>
  );
};

用法：

<CountryList displayFields={["countryName", "beerPrice"]} />

在另一个文件中使用组件中的道具

Use props from component in another file

javascript

reactjs

react-props