Создание динамического списка ссылок в response-router

Более идиоматический способ сделать это:

render: function () {
  return (
    <div className = "container center-block vlsection1">
      <h1 className = "text-center">Videos</h1>
      <div id = "vdlist">
        {nameArr.map(name => (
          <div key = {name} className = "container">
            <div class = "text-center"><Link to = "play"><h3>{name.toString()}</h3></Link></div>
          </div>
        ))}
      </div>
    </div>
  );
}

К вашему сведению, вы не можете использовать элементы только JSX (например, <Link/>) в .innerHTML.

ИЗМЕНИТЬ [Пояснение]: React создан, чтобы упростить управление динамическими веб-страницами, и по существу устраняет необходимость использовать такие вещи, как .innerHTML. Если вы используете React и пытаетесь использовать .innerHTML, скорее всего, вы идете в неправильном направлении.

Вы можете быть уверены, что любой элемент с заглавной буквы не является исходным элементом HTML, а является компонентом React. Если это так, то подходящее место для его использования - в блоке JSX (или, возможно, непосредственно в качестве компонента React, если хотите). Итак, <Link/>, <Router/> и любой другой тег, начинающийся с заглавной буквы.

Я добавил блок JavaScript в ваш .render JSX, который сопоставляется с массивом nameArr и генерирует код, который вы пытались сгенерировать из вашего метода .display. Как видите, вы можете вставить произвольный JavaScript в JSX, поместив его между фигурными скобками {}.

ИЗМЕНИТЬ [чтобы ответить на обновленный вопрос]: Ваша переменная nameArr доступна только в функции .end() для запроса, который вы делаете, поэтому, конечно, у вас нет доступа к ней в функции render. React предоставляет функцию именно для этого случая! Состояние реакции! Вы можете узнать больше о Состояние и жизненный цикл.

В этом случае все, что вам нужно сделать, это инициализировать какое-то состояние для вашего класса, а затем обновить его, когда вы получите новые данные. То, как вы инициализируете состояние с использованием стиля до ES6, который вы используете, - это добавление ключа getInitialState к вашему аргументу createReactClass:

getInitialState: function() {
  return { nameArr: [] };
},

В этом случае я инициализировал nameArr как пустой массив. Затем в вашей функции render вы можете обратиться к this.state.nameArr:

render: function () {
  return (
    <div className = "container center-block vlsection1">
      <h1 className = "text-center">Videos</h1>
      <div id = "vdlist">
        {this.state.nameArr.map(name => (
          <div key = {name} className = "container">
            <div class = "text-center"><Link to = "play"><h3>{name.toString()}</h3></Link></div>
          </div>
        ))}
      </div>
    </div>
  );
}

Как только вы это сделаете, если мы его нигде не обновим, он всегда будет пустым. Чтобы обновить его, мы вызываем this.setState({ ... }). Вот как это будет работать с вашим вызовом запроса:

request.post('/getdata')
  .end(function (err, res) {
    var response;
    var i;
    var nameArr = [];

    if (err || !res.ok) {
      console.info('Oh no! err');
      // NOTE: You should probably set an error in state here:
      // this.setState({ error: '...' });
    } else {
      var response = JSON.parse(res.text);

      // NOTE: .map is an easier way to extract the name here
      nameArr = response.map(function (p) { return p.name });

      // This is where you update your React state.
      this.setState({ nameArr: nameArr });
    }
  });

Как только вы это сделаете, ваш класс React должен обновиться быстро и эффективно. В этом сила React, и, надеюсь, вы видите, что это намного проще, чем пытаться создавать HTML заново. Вместо этого вы можете просто положиться на один метод render.

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

В React также неправильный способ прямого доступа к dom, поскольку вы потеряете некоторые мощные инструменты реагирования, такие как виртуальный dom.

Лучше использовать JSX. И под JSX я имею в виду настоящий JSX. Есть разница между строкой, которая «выглядит» как JSX, и фактическим JSX. Вы пытаетесь создать строку с JSX внутри. Затем вы добавляете эту строку в дом - используя свойство innerHTML. Однако ваш JSX на самом деле не будет обрабатываться как JSX. Он будет обрабатывать его как HTML - а в HTML нет элемента <Link />. Вот почему вы не видите предметы.

Вместо этого сделайте это так:

import React, { Component } from 'react';
import { Link } from 'react-router-dom'; // You need to use react-router-dom here

class VideoList extends Component {
  constructor(props) {
    super(props);
    this.nameArr = ['name1', 'name2'];
  }

  getVideos() {
    // This creates a JSX element for every name in the list.
    return this.nameArr.map(name => <div className = "text-center"><Link to = "play"><h3>{name}</h3></Link></div>);
  }

  render() {
    return (
      <div className = "container center-block vlsection1">
        <h1 className = "text-center">Videos</h1>
        {this.getVideos()}
    </div>
    );
  }
}