Question

正如您可能理解的那样，我是React的新手。我试图搜索StackOverflow并在Google上进行搜索，但找不到任何可以回答此问题的东西。

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

我想要的是使用此组件并在组件中确定要查看的内容。

如果要在其他.js文件中使用此组件，则需要执行以下操作：并仅显示位于countryName字段中的数据。我将使用国家/地区名称作为列表，这就是为什么我想仅列出名称的原因。

我使用道具玩耍，但是我无法理解。也许有人可以帮忙？

谢谢。

这是我用作组件的功能：

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

超级简单的方法可能是传递要作为道具显示的“字段”数组，并有条件地呈现UI。如果displayFields数组包含country属性的名称，则呈现该“字段”。

示例：

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

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

1 个答案: