Question

在这个React项目上，我正在构建一个非常简单的视图，一个带有链接的导航栏，我不想对其进行硬编码，并且可以使用定义的组件轻松设置。

在我的主要组件上，我有类似的东西：

class App extends React.Component {

  constructor( props ){
    super( props );
  } 


  render () {
    return (
        <div className="app-container-inner">
            <TheHeader brandName="The Jet" navLinks={[{title: "Home", src: "#home"}, {title: "About", src: "#about"}]}/>
        </div>
    );
  }
}

毋庸置疑TheHeader正从TheHeader.jsx导入主文件中：

class NavLinks extends React.Component {
    constructor( props ) {
        super( props );
        const listItems = this.props.links.map( (item, idx) => 
            <li><a href={item.src}>{item.title}</a></li>
        );
    }

    render() {
        return( <ul>{this.listItems}</ul> );
    }

}

class TheHeader extends React.Component {
    constructor(props) {
        super( props );
    }

    render() {
        return(
            <header className="main-header">
                 <div className="inner">
                     <h1 className="brand-name">{this.props.brandName}</h1>
                     <nav className="nav-urls">
                         <NavLinks links={this.props.navLinks}/>
                     </nav>
                 </div>
            </header>
        );
    }
}

在主要组件中，我们可以传递包含链接列表项的名称和位置的对象数组。

<TheHeader 
    brandName="The Jet" 
    navLinks={[
        {title: "Home", src: "#home"}, 
        {title: "About", src: "#about"}
    ]}
/>

然后在TheHeader组件中使用NavLinks组件作为此组件，我将this.props.navLinks道具作为NavLink组件上的道具传递（是的，很多传递数据，没有找到更简单的方法）

<NavLinks links={this.props.navLinks}/>

然而，结果并不是我所期望的，在最后一页上这是渲染

<header class="main-header">
  <div class="inner">
    <h1 class="brand-name">The Jet</h1>
    <nav class="nav-urls">
      <ul></ul>
    </nav>
  </div>
</header>

<ul>内没有任何内容。控制台对此没有任何帮助，没有任何错误或警告。知道我可能做错了吗？

Answer 1

在NavLinks中，this.listItems在渲染函数中不存在。不要使用const声明变量，而是需要设置this.listItems = {whatever}

{{1}}

Answer 2

在组件中存储DOM元素不是一个好的模式。相反，请在this.props.link方法中循环render。

您也可以将NavLinks转变为无状态组件：

const NavLinks = ({ links }) => 
  <ul>
    {links.map((item, index) =>
      <li key={index}>
        <a href={item.src}>{item.title}</a>
      </li>
    )}
  </ul>

有状态组件的示例：

class NavLinks extends React.Component {
  render() {
    return (
      <ul>
        {this.props.links.map((item, index) =>
          <li key={index}>
            <a href={item.src}>{item.title}</a>
          </li>
        )}
      </ul>
    )
  }
}

作为道具的对象数组不能正常工作

2 个答案: