вызывающая функция внутри render для визуализации элементов с использованием массива - PullRequest
Новая
       18

вызывающая функция внутри render для визуализации элементов с использованием массива

0 голосов
/ 01 мая 2019

У меня есть вопрос о том, как лучше сделать рендер в реакции при использовании массивов. Одним из способов является создание функций, которые визуализируют элементы для визуализации, а затем вызывают функции для выполнения визуализации. Другой способ - просто использовать array.map для создания элементов непосредственно внутри рендера. какой путь лучше? Я слышал, что вызов функции - не лучший способ, потому что он медленный и создает новый экземпляр элемента каждый раз, когда он перерисовывается.

Что вы, ребята, думаете? 

export default class Calculator extends React.Component {
  renderButtons = arr => {
    let btnArr = [];
    arr.map(item => {
      btnArr.push(<button>{item}</button>);
    });
    return btnArr;
  };
  render() {
    let keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
    let operations = ["+", "-", "*", "/"];
    return (
      <div>
        {keys.map(item => {
          return <button key={item}>{item}</button>;
        })}
        <div>{this.renderButtons(operations)}</div>
      </div>
    );
  }
}

Один для массива ключей, где я просто запустите карту, чтобы отобразить цифровые кнопки

Я использовал другой метод для кнопок операций где я вызвал функцию для рендеринга.

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

1 Ответ

1 голос
/ 01 мая 2019

Я предпочитаю стиль, используемый для ваших кнопок, потому что мне не нравится видеть код JavaScript в моем JSX.

Однако ты только на полпути. Название вашей функции дает вам подсказку: renderButtons. Вы должны «визуализировать кнопки», используя render() в отдельном компоненте. Я бы создал два новых компонента: Button и ButtonList. ButtonList импортирует и использует компонент Button, а ваш компонент Calculator импортирует и использует ButtonList.

...