Uncaught ReferenceError: Row is not defined React-foundation

Question

我已经在我的 React 项目上安装了 Foundation，即使在导入之后，它仍然无法定义 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 中它说 "react-foundation": "^0.8.2" under dependencies

Answer 1

你需要这样导入

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

另外你还需要Column

Answer 2

从npm package link to the Grid Code可以看出Row和Column在react-foundation中是named exports，所以可以将它们导入为[=16] =]

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

并使用它们

Uncaught ReferenceError: Row is not defined React-foundation

Uncaught ReferenceError: Row is not defined React-foundation

zurb-foundation

reactjs