为什么在 React js 中不使用 this.props 渲染数据？

Question

我正在将页眉分解为组件。例如：HaderTop、HeaderBottom。此外，我将 HeaderBottom 分解为更多组件。 HeaderBottom 的组件之一是 "HeaderTab"。我正在通过 "HeaderTab" 组件传递 JSON 对象数据，我想在 HeaderTab class 中使用 "this.props.data.map()" 循环它。我没有收到任何错误，但我也没有看到视图。下面是一段代码。 "Below I have attached the view also (My UI should look like this)."

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

我认为您需要 return 映射函数中的一个对象：

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

Answer 2

您没有在 map 函数中返回值。尝试：

{
    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.

为什么在 React js 中不使用 this.props 渲染数据？

why data is not rendering using this.props in react js?

javascript

reactjs

react-jsx