Question

我试图弄清楚如何制作和使用部分反应。我已经弄明白了如何创建一个新页面，但现在我试图将我的页脚部分放入并将其添加到我的页面布局中。

我有一个页面布局 - 我试图在这里添加页脚：

import React from 'react'
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'
import Logo from '../assets/logo.png'
import '../styles/PageLayout.scss'
var Footer = require('Footer');


export const PageLayout = ({ children }) => (
  <div className='container text-center'>
    <NavLink to='/' activeClassName='page-layout__nav-item--active'><img className='icon' src={Logo} /></NavLink>

    <div className='page-layout__viewport'>
      {children}
      <Footer />
    </div>

    </div>


  </div>


)
PageLayout.propTypes = {
  children: PropTypes.node,
}

export default PageLayout

然后我有一个组件/ Footer.js，其中包含：

import React from 'react';
import ReactDOM from 'react-dom';
// import { Button } from 'react-bootstrap';
import * as ReactBootstrap from 'react-bootstrap'

class Footer extends React.Component {

  render: function () {
      return (
        testing
      );
    }
  }

  module.exports = Footer;

}

这会出现错误：

ERROR in ./src/components/PageLayout.js
Module not found: Error: Can't resolve 'Footer' in '/Users/me/code/learn-react-redux/src/components'
 @ ./src/components/PageLayout.js 26:13-30
 @ ./src/routes/index.js
 @ ./src/main.js
 @ multi ./src/main webpack-hot-middleware/client.js?path=/__webpack_hmr

有没有人知道如何将部分内容合并到页面布局中。放在那里没有任何动态 - 我只是尝试（并且悲惨地失败）提取部分并保持我的文件整洁。

Answer 1

我可以在你的页脚中看到两个三个错误。

您的render（）函数必须返回一个元素，而不是裸文本。即<span>testing</span> NOT testing。
您的导出语句位于类定义中。把它放在外面。
更新您的渲染功能签名应为render() {

最后，您的require语句看起来也错了。试试require('./Footer')。

你如何做出部分反应

1 个答案: