0

基本问题，但我们都从某个地方开始。

我有一个父 Nav.js 

import React, { Component } from 'react'
import navLink from './navLink'

class Nav extends Component {
  render () {
    return (
      <div>
        <nav className="bb bt b--black-20 tc center bg-white">
          <navLink />
        </nav>
      </div>
    )
  }
}

Nav.displayName = 'Nav'

export default Nav

这是不会显示的文件：

导航链接.js：

import React from 'react'
import Link from 'next/link'

const navigationLinks = [
  { name: '1', link: '/', router: true },
  { name: '2', link: '#' }
]

const renderLink = (link, i) => {
  if (link.router === true) {
    return (
      <Link href={link.link}>
        <a className="yellow" key={i}>{link.name}</a>
      </Link>
    )
  } else {
    return (
      <a className="red" key={i} target="_blank" rel="noopener noreferrer" href={link.link}>{link.name}</a>
    )
  }
}

const navLink = () => (
  <nav className="container">
    {navigationLinks.map(link => renderLink(link))}
  </nav>
)

navLink.displayName = 'navLink'

export default navLink

我的问题是超级基本的，但我不知道如何解决这个问题。谢谢你的时间！

4

2 回答 2

3

主要问题是navLink一个小写字母，它应该NavLink就像RenderLink你想使用它一样。

在 JSX 中小写被认为是一个HTML标签，HTML 不是没有navLink标签所以它只是没有显示。

于 2017-07-29T03:19:20.087 回答
2

用户定义的组件必须大写

JSX 标签的第一部分决定了 React 元素的类型。大写的类型表示 JSX 标签指的是一个 React 组件。这些标签被编译成对命名变量的直接引用，所以如果你使用 JSX 表达式，Foo 必须在范围内。

见：文档

渲染链接

const SimpleLink = ({link}) => (
      <Link href={link.link}>
        <a className="yellow">{link.name}</a>
      </Link>
);

const RenderRouter = ({link}) => (
    <a className="red" target="_blank" href={link.link}>{link.name}</a>
);

const renderLink = link => link.router ? 
    ( <SimpleLink key={i} link={link}/> ) :
    ( <RenderRouter key={i} link={link}/> );

...

const NavLink = () => (
  <div className="container">
    { navigationLinks.map((link, i) => renderLink(link, i))}
  </div>
);

...
export default NavLink

进口

import NavLink from './navLink.js'

导航组件

class Nav extends Component {
  render () {
    return (
      <nav className="bb bt b--black-20 tc center bg-white">
          <NavLink />
      </nav>
    )
  }
}

请参阅：工作示例

修复 proptypes

react-router 可能已经为其提供了 propType 定义，但无论是否提供，您仍然需要显式连接它们。

Rend.propTypes = {
  link: React.PropTypes.shape({
      link: React.PropTypes.string.isRequired
  }),
};

参见：eslint-plugin-react/issues/1109

于 2017-07-29T03:07:08.377 回答