小编xia*_*406的帖子

据我所知,<Route path="/" component={App} />将提供App与路由相关的道具location和params.如果我的App组件有许多嵌套的子组件,如何让子组件无需访问这些道具:

• 从App传递道具
• 使用窗口对象
• 为嵌套的子组件创建路由

我以为this.context.router会有一些与路线相关的信息,但this.context.router似乎只有一些功能来操纵路线.

// bad
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);

// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

这取自Airbnb反应风格指南.有人可以解释为什么"不鼓励依赖功能名称推断"？这只是一种风格问题吗？

当服务器端呈现使用window或localStorage这些浏览器全局变量的React组件时,我总是需要添加

if (typeof localStorage !== 'undefined') { // then do stuff }

摆脱那些'localStorage is not defined'错误.

还有其他合适的解决方案吗？

编辑我的用例

1. window是为了它的属性innerwitdth,并添加原始的浏览器事件,如resize
2. localStorage 是存储JWT令牌

class Component extends React.Component<ComponentProps> {
  // ...magic
  elementRef = React.createRef();

  render() {
    return this.props.children(this.elementRef);
  }
}

这是我的一个组成部分.它基本上将ref回调传递给了孩子们.然后就像这样使用它

<Component>
  {elementRef => (
    <div ref={elementRef} />
  )}
</Component>

我的意图Component是孩子可以附加elementRef到任何元素.

但是我遇到了很多麻烦,无法正确输入我的组件.

我现在在做什么:

type ComponentProps = {
  +children: (
    ref: { current: HTMLDivElement | null } | ((ref: ?HTMLDivElement) => void)
  ) => React.Node,
};

但显然这只适用于div.如果我在跨度上使用elementRef.流会抱怨.

那么我应该如何Component正确键入它以使其适用于任何HTML元素？

我正在使用Mac上的Eclipse设计GUI,我想让我JButton只显示我设置的Icon.它在Mac OS上看起来很好,但是当我将它导出到jar文件并在Windows操作系统上运行时,JButton看起来像这样:

边界都是EmptyBorder.

我做错了什么？怎么能让后面的广场消失？