Блог

Главная - Вопросы по программированию - Передать массив в href кнопки

Передать массив в href кнопки

#javascript #reactjs

#javascript #reactjs

Вопрос:

Вот как я могу загрузить единственный документ с помощью кнопки:

 <Button aria-label="download" href={props.myLink} download target="_blank" size="small">
    <CloudDownloadIcon />
</Button>

Что, если props.MyLink будет массивом строк?
Тогда как передать каждый элемент массива в href?

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

1. props.MyLink не должен быть массивом, но если этого нельзя избежать, то лучше просто перебрать массив и сгенерировать кнопку для каждой ссылки

2. Вы хотите отобразить несколько кнопок или одну? Какой формат props.myLink ?

3. props.myLink в первом примере это строка, а в целевом примере — строка[]. Я хочу загрузить несколько файлов одним нажатием кнопки

Ответ №1:

Почему бы не использовать onClick свойство вместо href вызова пользовательской функции? Затем вы можете вызывать window.open для каждого элемента в вашем props.myLink :

 import React, { Component } from 'react';

class DownloadButton extends Component {
  
  constructor(props) {
    super(props);
    this.downloadFiles = props.myLink;
  }

  downloadFiles() {
    for(var i = 0; i < this.downloadFiles.length; i  ) {
      window.open(this.downloadFiles[i]);
    }
  }
  
  return (
    <Button aria-label="download" onClick={downloadFiles}>
        <CloudDownloadIcon />
    </Button>
  );
}

export default App;

Конечно, если вы хотите сгенерировать кнопку для каждого элемента в props.myLink , вы можете сделать это следующим образом:

 import React, { Component } from 'react';

class DownloadButton extends Component {
  
  constructor(props) {
    super(props);
    this.downloadFiles = props.myLink;
  }
  
  const buttons = this.downloadFiles.map((file) =>
    <Button aria-label="download" href={file} download target ="_blank" size="small">
        <CloudDownloadIcon />
    </Button><br/>
  );
  
  return (
    <div>{buttons}</div>
  );
}

export default App;

Все это в предположении, что props.myLink это массив строк.