Question

我正在将我的标题分解成组件。例如：HaderTop，HeaderBottom。此外，我将HeaderBottom分解为更多组件。 HeaderBottom的一个组件是“HeaderTab”。我通过“HeaderTab”组件传递JSON OBJECT DATA，我想在HeaderTab类中使用“this.props.data.map（）”循环。我没有收到任何错误，但我也没有收到任何错误。下面是一段代码。 “下面我也附上了视图（我的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>
     )
})

Answer 2

您没有在地图功能中返回值。尝试：

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

我看到你正在使用es6类。您还应该尝试https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

为什么数据不能在反应中使用this.props渲染？

2 个答案: