Question

我已经在我的反应项目中安装了Foundation，即使在导入它之后，它仍然无法定义基础

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import Auth from '../modules/Auth';
import DrawerLeft from './Drawer.jsx';
import Foundation from 'react-foundation';


const Base = ({ children }) => (
  <div>
    <div className="top-bar">
      <Row>
        <Column small={2} large={4}>TESTING</Column>
      </Row>

      {Auth.isUserAuthenticated() ? (
        <div className="top-bar-right">
          <Link to="/logout">Exit</Link>
        </div>
      ) : (
        <div className="top-bar-right">
          <Link to="/login">Enter</Link>
          <Link to="/signup">Join</Link>
        </div>
      )}

    </div>

    { /* child component will be rendered here */ }
    {children}
  </div>
);

Base.propTypes = {
  children: PropTypes.object.isRequired
};

export default Base;

在我的package.json中，它说＆＃34; react-foundation＆＃34;：＆＃34; ^ 0.8.2＆＃34;在依赖项下

Answer 1

您需要像这样导入

import { Row, Column } from 'react-foundation';

此外，您还需要Column

Answer 2

从npm package link to the Grid Code，您可以在Row中看到Column和named exports为react-foundation，因此您可以将其导入为

 import {Row, Column} from 'react-foundation';

并使用它们

未捕获的ReferenceError：未定义行React-foundation

2 个答案: