Используйте реквизит из компонента в другом файле - PullRequest
Новая
       5

Используйте реквизит из компонента в другом файле

0 голосов
/ 15 апреля 2020

Как вы понимаете, я довольно новичок в 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>
    )
}

1 Ответ

2 голосов
/ 15 апреля 2020

Супер простым способом может быть передача массива "полей", которые вы хотите отобразить в качестве реквизита, и условно визуализировать пользовательский интерфейс. Если массив displayFields включает в себя имя свойства страны, отобразите это "поле".

Пример: 

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