Question

我仍在学习Reactjs。

我正在尝试在表格行中填充表格标题。

以下编写的代码通过renderTableHeaders（）函数将生成的表头仅视为纯文本。

module.exports = React.createClass({

  getInitialState: function() {
    return {
      defaultTableHeaders: [
        'a', 'b', 'c', 'd',
      ]
    }
  },

  renderTableHeaders: function() {

      var markup = [];

      var defaultTableHeaders = this.state.defaultTableHeaders;

      for (var index = 0; index < defaultTableHeaders.length; index++) {
        markup.push('<th>' + defaultTableHeaders[index] + '</th>');
      }

      return markup;
  },

  render: function() {

    return (
      <thead>
        <tr>
          {this.renderTableHeaders()}
        </tr>
      </thead>
    );
  }

});

当我将render（）函数修改为下面时，它将正常工作。知道为什么吗？

  render: function() {

    return (
      <thead>
        <tr>
          <th>a</th><th>b</th><th>c</th><th>d</th>
        </tr>
      </thead>
    );
  }

Answer 1

使用jsx语法创建元素并将元素推送到数组：

markup.push(<th>{defaultTableHeaders[index]}</th>);

Answer 2

是的，所以在你的renderTableHeaders(中，你正在返回一个数组。所以当你这样做时：{this.renderTableHeaders()} 它实际上只是一个包含所有标签的javascript数组。尝试使用{markup}而不是直接调用该函数。看看这个答案： loop inside React JSX

Answer 3

主要问题是你的renderTableHeaders函数返回一个字符串而不是返回实际的JSX标记。

请试试这个：

module.exports = React.createClass({
  getInitialState: function() {
    return {
      defaultTableHeaders: [
        'a', 'b', 'c', 'd',
      ]
    }
  },

  renderTableHeaders: function() {
    var defaultTableHeaders = this.state.defaultTableHeaders;

    return defaultTableHeaders.map(function (header) {
      return (
        <th>{header}</th>
      );
    })
  },

  render: function() {
    return (
      <thead>
        <tr>
          {this.renderTableHeaders()}
        </tr>
      </thead>
    );
  }
});

Reactjs没有正确显示render（）函数

3 个答案: