React Parent 组件未呈现 Child 组件

Question

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

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

用户定义的组件必须大写

The first part of a JSX tag determines the type of the React element. Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

参见：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

修复道具类型

react-router may provide propType definitions for it already, but whether they do or not, you'd still need to explicitly connect them.

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

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

Answer 2

主要问题是navLink有一个小字母，如果要用的话应该是NavLink和RenderLink。

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

React Parent 组件未呈现 Child 组件

React Parent Component Not Rendering Child Component

reactjs

nextjs

用户定义的组件必须大写

渲染链接

导入

导航组件

修复道具类型