在 React 中通过 props 传递 ref 以防止重复常用功能答案

【问题标题】：Passing ref via props in React to prevent duplication of commonly used functionality在 React 中通过 props 传递 ref 以防止重复常用功能
【发布时间】：2018-01-01 20:37:34
【问题描述】：

我有 5 个不同的按钮组件，所有这些组件的样式都非常不同，并且需要不同的道具来渲染。我希望所有 5 个组件都具有的一项功能是，在单击它们后，按钮会失去焦点（使用 .blur()）。出于可访问性的原因，我有一个 :focus 样式，但是在单击按钮后，我需要丢失 :focus 样式。

与其在所有 5 个按钮上编写完全相同的功能，不如我创建一个单独的组件来处理此功能。

我是 React 的新手，所以之前没有做过这样的事情，所以我想知道解决问题的最佳方法，因为我已经读过通过 props 传递 ref 是识别反-模式，但以我目前对 React 的了解，这似乎是实现我想要的唯一方法。

如果我要在其中一个 Button 组件中执行此操作，然后在页面上呈现它，它将如下所示：

const Page = () => {
  const loseFocus = () => {
    this.btn.blur();
  };

  return (
    <Button
      onClick={loseFocus}
      ref={(btn) => { this.btn = btn; }}
    >
      Toggle
    </Button>
  );
};

const Button = props => (
  <button onClick={props.onClick}>
    {props.children}
  </button>
);

我不想对我曾经包含的每个 Button 组件都这样做，理想情况下我会让每个按钮在被点击后自动失去焦点。

如果我要在 jQuery 中做这样的事情，我可以使用像这样的事件监听器来定位所有 .btn 元素（这是一个由所有 5 个组件共享的公共类）：

$('.btn').on('click', function() {
 $(this).blur(); 
};

我知道我可以用普通的 javascript 做一些非常相似的事情，但这会违反 React 的最佳实践吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在这种情况下，我想使用一些不同的策略。我构建一个按钮组件具有可变属性以满足我的所有需求

<Button type="large" text="cool" link={href}/>

内部使用

render()
{
   return  <div style={css}>button stuff</div>
}

每次点击或任何我想要的切换 css 的位置。

如果每个组件都使用 css，就会有真正的力量您可以使用 javascript 来控制 css 的用途当前实例。甚至可以对组件状态更改等进行动态 css 突变...

【讨论】：