如何在JSX中使用map嵌套循环？

Question

我无法实现有两个嵌套map：

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(this.state.templates).map(function(template_name) {
            return (
              <tr key={template_name}><td><b>Template: {template_name}</b></td></tr>

              {this.state.templates[template_name].items.map(function(item) {
                return (
                  <tr key={item.id}><td>{item.id}</td></tr>
                )
              })}
            )
          })}
        </tbody>
      </table>
    )
  }

这给出一个SyntaxError: unknown: Unexpected token。

您如何map在JSX中嵌套调用？

Answer 1

您需要将其包装在一个元素内。

像这样（tr由于表元素的规则，我添加了一个额外的东西）：

  render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(templates).map(function (template_name) {
            return (
              <tr key={template_name}>
                <tr>
                  <td>
                    <b>Template: {template_name}</b>
                  </td>
                </tr>
                {templates[template_name].items.map(function (item) {
                  return (
                    <tr key={item.id}>
                      <td>{item}</td>
                    </tr>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

运行示例（无表）：

const templates = {

  template1: {

    items: [1, 2]

  },

  template2: {

    items: [2, 3, 4]

  },

};



const App = () => (

  <div>

    {

      Object.keys(templates).map(template_name => {

        return (

          <div>

            <div>{template_name}</div>

            {

              templates[template_name].items.map(item => {

                return(<div>{item}</div>)

              })

            }

          </div>

        )

      })

    }

  </div>

);

ReactDOM.render(<App />, document.getElementById('root'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>