Reactjs 你知道如何隐式地将类名传递给呈现元素吗？

让我从例子开始

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>
  );
};

const-App=（）=>{
返回(
);
};
常量Navbar=（{className}）=>{
const rootClass=classnames（'Navbar'，className）；
返回(
一些内容。。。
);
};

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

我非常感谢开发人员的经验和IDE支持。我希望能够导航到CSS类声明。如果我使用

类名

，我就失去了这个机会

因此，我脑子里一直在想黑客如何通过隐式传递这个

className

。在理想情况下，我将能够通过

cmd+单击我的IDE中的
导航到
App\uu导航栏
和
navbar

你知道怎么做吗

/cc
它似乎在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>
);

现在，我可以使用cmd+click同时单击导航栏和App_uu导航栏，分别访问css中的组件和类。当然，我也尝试过使用带有参数的组件，比如函数MyComponent（{children，myprop}）。在css文件中输入正确的样式表类之后，这项工作就开始了，这并没有什么神奇之处（但也许一个插件可以自动创建它）。
您使用什么IDE？idk如果这个问题是关于操作IDE以允许您在点击
cmd+点击
类名时点击
className
，是吗？这个问题真的与代码或IDE有关吗？当您在JSX中点击类名时，您希望IDE将您带到css定义？或者您正在React-Dev工具栏中谈论此体验？与其他人一样，我不知道React是如何实现的？您是否要求IDE对传入参数执行运行时评估，而不实际运行代码？在
const stubClass=“App”的情况下；const navbarClass=“navbar”；Navbar className={stubClass+“_u“+navbarClass}/>
您希望IDE对此进行解释吗？那么条件赋值呢，其中传入的值依赖于一些无法静态计算的因素？那么当您添加
const App2=（）=>{return（）；}
编辑器是否应将您同时指向
应用程序导航栏
和
应用程序导航栏
？
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>
    );
}
}

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