Question

我在React中有一个导航栏组件，正在传递一个JSON对象和一个简单的字符串作为道具：

<NavBar links={ navlinks } hello="hello" />;

但是，我尝试在组件中调用道具，但它们不起作用。

import React, { Component } from 'react'
import './BasicNavBar.css'
import 'font-awesome/css/font-awesome.min.css'


export class NavBar extends Component {
  constructor(props) {
      super(props);
      this.state = {
        hidden: false
      };
  }

 toggleNav = (e) => {
    e.preventDefault();
    this.setState({
      hidden: !this.state.hidden
    });
  };

  render(){
    console.log(this.props.links)
    return(
      <nav className="navbar">
      <span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
        <span className="nav-bar-toggle" id="js-navbar-toggle">
          <i className="fa fa-bars"></i>
        </span>
      </span>
        <a href="#" className="logo"></a>
        <ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
      {
        Object.keys(this.props.links).map(key => {
          <li><a href="#" className="nav-links">{key}</a></li>
        })
      }
      </nav>
    )
  }
}

我尝试过this.props.hello和this.props.links，但它们都未定义回来。我也尝试返回props，但它以空JSON字符串形式返回。

Answer 1

您可以做的是首先在执行.map（）之前检查this.props.links是否为真实值。我敢打赌，这里发生了一些异步逻辑，我们试图在传递道具之前访问您的道具。

import React, { Component } from 'react'
import './BasicNavBar.css'
import 'font-awesome/css/font-awesome.min.css'


export class NavBar extends Component {
  constructor(props) {
      super(props);
      this.state = {
        hidden: false
      };
  }

 toggleNav = (e) => {
    e.preventDefault();
    this.setState({
      hidden: !this.state.hidden
    });
  };

  render(){
    console.log(this.props.links)
    return(
      <nav className="navbar">
      <span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
        <span className="nav-bar-toggle" id="js-navbar-toggle">
          <i className="fa fa-bars"></i>
        </span>
      </span>
        <a href="#" className="logo"></a>
        <ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
      {
         this.props.links ? (
             Object.keys(this.props.links).map(key => {
                return <li><a href="#" className="nav-links">{key}</a></li>
             }) 
         ) : (
            <div></div>
         )
      }
      </nav>
    )
  }
}

Answer 2

非常微妙的事情我应该早点抓到！

  Object.keys(this.props.links).map(key => {
        <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>
   }
    );

问题是我将箭头功能与{}而非()一起使用。

{}表示语句，因此我必须使用return而不是仅在此处使用该语句。

我有两种解决方法：

Object.keys(this.props.links).map(key => 
        <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>

    );

或

Object.keys(this.props.links).map(key => {
        return <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>;
   }
    );

我使用()是因为我只有一条语句，所以它更干净。

来自MSDN的箭头功能：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

反应道具返回未定义

2 个答案: