反应父组件不渲染子组件

Question

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

我有一个父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

这是不会显示的文件：

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

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

Answer 1

主要问题是navLink有一个小写字母，如果你想使用它，它应该是NavLink RenderLink。

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

Answer 2

用户定义的组件必须大写

  

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

请参阅：docs

渲染链接

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>
    )
  }
}

请参阅：working example

修复proptypes

  

react-router可能已经为它提供了propType定义，但无论它们是否有，你仍然需要明确地连接它们。

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

请参阅：eslint-plugin-react/issues/1109