Question

让我以实例开始

const App = () => {
  return (
    <div className="App">
      <Navbar className="App__navbar" />
    </div>
  );
};

const Navbar = ({ className }) => {
  const rootClass = classnames('Navbar', className);

  return (
    <div className={rootClass}>
      some content...
    </div>
  );
};

这是向组件添加额外类的一种非常常见的方法。没关系，它有效。但如果你问我，我会告诉你我们这里有问题。

我非常感谢开发人员的经验和IDE支持。我希望能够导航到CSS类声明。如果我使用classnames，我就失去了这个机会。

所以 hack React隐含地传递这个className的想法占据了我的脑海。在理想情况下，我将能够通过我的IDE中的App__navbar导航到Navbar和cmd+click。

任何想法如何做到这一点？

/ cc Dan Abramov

Answer 1

通过执行以下操作（示例），它似乎适用于IntelliJ IDEA 2016.3.5：

在routes.js中

import React from 'react';
import {Route, IndexRoute} from 'react-router'
import App from './App';
import LoginContainer from './containers/LoginContainer';
import SidebarLayout from './layouts/SidebarLayout';
import DashboardPage from './pages/Dashboard';
import MembersPage from './pages/Members';
import NotFoundPage from './pages/NotFound';

module.exports = (
<Route component={App}>
    <Route path="/" component={LoginContainer}>
        <Route component={SidebarLayout} className="App__navbar">
            <IndexRoute component={DashboardPage} />
            <Route path="/members" component={MembersPage} />
        </Route>
    </Route>
    <Route path="*">
        <IndexRoute component={NotFoundPage} />
    </Route>
</Route>
);

在SideBarLayout.js

require('semantic-ui-css/semantic.css');
import React from 'react';
import './SidebarLayout.css';

export default class SidebarLayout extends React.Component {
render() {
    return (
        <div>
            <div className='App__navbar'>
                <XXXContainer />
                <YYYContainer />
            </div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
}
}

在SidebarLayout.css

中

.App__navbar {
    width: 220px;
    position: absolute;
    background-color: #000;
}

现在我可以使用cmd + click单击Navbar和App__navbar，分别转到css中的组件和类。当然我也尝试使用带有函数MyComponent（{children，myprop}）等参数的组件。在此工作之前，您总是需要在css文件中输入正确的样式表类，没有魔法（但也许插件可以自动创建）。

任何想法如何隐式地将className传递给渲染元素？

1 个答案: