Блог

Главная - Вопросы по программированию - Сопоставьте ключи словаря со строками и отобразите их значения

Сопоставьте ключи словаря со строками и отобразите их значения

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть список словарей, установленных как props в моем React компоненте, например:

 console.log(fruits): [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]

Диктует:

 0:
name: 'Apple'
color: 'Red'

1:
name: 'Banana'
color: 'Yellow'

2:
name: 'Pear'
color: 'Green'

....

И мне нужно отобразить их ИМЕНА в строках, каждая строка на основе соответствующего фруктового цвета:

 class Basket extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fruits:[],
      isLoaded:false
    };
  }

render() {

        const { fruits } = this.props;
        console.log(fruits)

        return (
     <div className="app">
        <div className="fruit-wrapper">
          <div className="row">
            <Fruit>Apple</Fruit>
            <Fruit>Red 2</Fruit>
            <Fruit>Red 3</Fruit>
          </div>
          <div className="row">
            <Fruit>Banana</Fruit>
            <Fruit>Yellow 2</Fruit>
            <Fruit>Yellow 3</Fruit>
          </div>
            <div className="row">
            <Fruit>Pear</Fruit>
            <Fruit>Green 1</Fruit>
            <Fruit>Green 2</Fruit>
          </div>
          </div>
        </div>
      </div>
    );
  }

экспорт корзины по умолчанию;

Как я могу сопоставить значения объектов fruit из этого списка, определяемого ОС, и отобразить названия фруктов, присвоив каждому имени соответствующий цвет строки?

Комментарии:

1. Зачем вам нужны Yellow 2 Yellow 3 ячейки и?

2. потому что для каждого есть три значения. это просто фиктивное имя

3. Я обновил изолированную среду и использовал структуру компонентов класса

Ответ №1:

Рабочая песочница

 import React from "react";

function Fruit({ children }) {
  return <div>{children}</div>;
}

export default class Basket extends React.Component {
  state = {
    isLoaded: false
  };

  render() {
    const { fruits } = this.props;

    return (
      <div className="app">
        <div className="fruit-wrapper">
          {fruits.map(({ name, color }) => (
            <div className="fruit-wrapper">
              <Fruit>{name}</Fruit>
              <Fruit>{color} 2</Fruit>
              <Fruit>{color} 3</Fruit>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Комментарии:

1. Спасибо. но можете ли вы сохранить компонент <Fruit/> ? отличается ли это от сопоставления с <div> ?

2. важно сохранить структуру. обратите внимание на <div className='fruit-wrapper'

3. извините, ваше решение не работает для меня. Я не могу преобразовать фактор из состояния в компонент без состояния. Если вы хотите предложить решение, основанное на моей первоначальной структуре, я приму его.

4. пожалуйста, обратитесь к моей правке. когда я добавляю ваши две функции, я получаю: Line 52:12: Parsing error: Unexpected token

5. разве в функциях не отсутствуют стрелки?