javascript - 为什么在 React js 中数据没有使用 this.props 渲染？

Question

我正在将标题分解为组件。例如:HaderTop、HeaderBottom。此外，我将 HeaderBottom 分解为更多组件。 HeaderBottom 的组件之一是“HeaderTab”。我通过“HeaderTab”组件传递 JSON 对象数据，我想在 HeaderTab 类中使用“this.props.data.map()”循环该组件。我没有收到任何错误，但我也没有得到 View 。下面是一段代码。 “下面我还附加了 View (我的 UI 应该如下所示)。”

import React from 'react';
    import { Link } from 'react-router';

    import HeaderBreadcrumb from './HeaderBreadcrumb';
    import HeaderTab from './HeaderTab';

    export default class HeaderBottom extends React.Component {
        constructor(props) {
            super(props);

          this.state = {
             tabs: 
             [
                {"id":1,"name":"Dental","path":"dentalplan"},                
                {"id":2,"name":"Views","path":"dentalplan"},
                {"id":3,"name":"Accident Companion","path":"dentalplan"},
                {"id":4,"name":"Critical Illness","path":"dentalplan"},
                {"id":5,"name":"Hospital Confinement","path":"dentalplan"}
             ]
          }
       }
        render() {
            return (
                    <div id="layout-navigation" className="layout-navigation">
                      <div className="content-heading">
                        <div className="container">

                          <HeaderBreadcrumb />


                          <div className="content-heading__title">
                            <h1>Dental Plans</h1>
                          </div>

                          <HeaderTab data={this.state.tabs}/> 


                        </div>
                      </div>
                    </div>
            );
        }

    }

    import React from 'react';
    import { Link } from 'react-router';


    export default class HeaderTab extends React.Component {

        render() {
            return (

                <div className="content-heading__tabs" data={this.props.data}>
                    <ul className="tabs tabs--horizontal tabs--overlay">
                              {
                                this.props.data.map(function(item, i) {
                                  <li role="presentation" className="tab">
                                    <Link to={item.path}>{item.name}</Link>
                                  </li>
                                })
                              }
                    </ul>
                </div>    

            );
        }

    }

Answer 1

我认为你需要在 map 函数中返回一个对象:

this.props.data.map(function(item, i) {
     return (
        <li role="presentation" className="tab">
          <Link to={item.path}>{item.name}</Link>
        </li>
     )
})