Reactjs 反应父组件不呈现子组件

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

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

import React，{Component}来自“React”
从“/navLink”导入navLink
类Nav扩展组件{
渲染（）{
返回(
)
}
}
Nav.displayName='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

从“React”导入React
从“下一个/链接”导入链接
常量导航链接=[
{name:'1'，link:'/'，router:true}，
{名称：'2'，链接：'#'}
]
常量renderLink=（链接，i）=>{
如果（link.router===true）{
返回(
)
}
}
常量导航链接=（）=>(
{navigationLinks.map（link=>renderLink（link））}
)
navLink.displayName='navLink'
导出默认导航链接

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

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

见：

渲染链接 导航分量 请参阅：

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

见：

渲染链接 导航分量

---

请参阅：

主要问题是

navLink

带有小写字母，如果要使用它，它应该是

navLink

as

RenderLink

---

在JSX中，小写被认为是一个

HTML

标记，

HTML

没有

navLink

标记，所以它只是没有显示出来。

主要问题是

navLink

带有一个小写字母，如果你想使用它，应该是

navLink

作为

RenderLink

---

在JSX中，小写字母被认为是一个

HTML

标记，

HTML

没有

navLink

标记，所以它只是没有显示出来。

您是从“navLink”导入的，但它所在的文件是“navBar”？@ChrisCousins很有意思。这是SO post中的一个错误，但真正的文件是navLink.js。我更新了SO post以反映该文件。np-你能把渲染的内容放进去吗？有任何输出吗？没有生成任何内容。我确实在react开发者工具中看到：==r，所以它就在那里。这是我的navLink.js中的内容：您正在从“navLink”导入，但它所在的文件是“navBar”？@ChrisCousins很好。这是SO post中的一个错误，但真正的文件是navLink.js。我更新了SO post以反映该文件。np-你能把渲染的内容放进去吗？有任何输出吗？没有生成任何内容。我确实在react开发者工具中看到：==r，所以它就在那里。这是我navLink.js中的一些东西：我没有测试它，我会制作一个

webpackbin

我没有测试它，我会制作一个

webpackbin

你的提交是我的问题。小写字母。谢谢。你的承诺是我的问题。小写字母。非常感谢。

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

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