获取显示方向的反应元素“dir”值（rtl vs ltr）答案

【问题标题】：Get React Element "dir" Value for Display Direction (rtl vs ltr)获取显示方向的反应元素“dir”值（rtl vs ltr）
【发布时间】：2019-12-16 22:20:57
【问题描述】：

目标：

创建一个可重用的组件来检测显示方向并进行相应的渲染。

我真的很希望能够在 DOM 中的某个较高位置设置 dir="rtl"，然后让组件继承该值并使用它来确定如何进行一些处理以最佳地显示组件。

组件如下：

    <div dir="rtl">
      <Field label="This is a rtl field..." />
    </div>

显示如下：

const Field: React.FunctionComponent<FieldProps> = ({ attributes }) => {
  const divWrapper = React.useRef<HTMLDivElement>(null); // A reference to current component...
  const thisComponentDirection = divWrapper.dir;

  return (
    <div>
        <WarpBasedOnDir condition={thisComponentDirection} wrapper={directionWrapper}>
          <MaterialTextField attributes={attributes} />
        </WarpBasedOnDir>
    </div>
  );
};

问题：

我找不到可行的版本：

const divWrapper = React.useRef<HTMLDivElement>(null); // A reference to current component...
const thisComponentDirection = divWrapper.dir;

问题：

有没有办法在包装元素/组件上设置目录，然后让 React 组件从该组件中找到目录？

【问题讨论】：

我认为使用 React 上下文 (reactjs.org/docs/context.html) 可能是在某处存储属性并尝试使用引用的更好方法。
@larz 这是一种方法......但是我想将组件用作不需要任何设置的可导入库，只需要参数。
如果我理解正确，我认为这仍然很容易完成。您只需要导出上下文提供者和消费者。将提供者放在层次结构中相当高的位置，然后在任何你想查看它是否设置为rtl 或ltr 的地方，导入消费者并包装你要使用的组件。
@larz 我的目标是不使用从我的库中引入的组件之外的任何特定于框架的方法。我正在尝试切断组件对上下文或道具的依赖，并查看消费者应用程序的 DOM 中已有的内容。

标签： javascript reactjs

【解决方案1】：

由于我没有足够的积分来发表评论，因此我将其发布为答案。

我认为您正在寻找反应状态。查看https://reactjs.org/docs/state-and-lifecycle.html

如果你使用函数式组件，可以使用useState钩子

如果您将 'dir' 作为属性存储，请尝试

divWrapper.getAttribute('dir');

希望对你有帮助

【讨论】：

我尝试了这种方法，但如果在 DOM 上进一步设置，似乎找不到 dir 属性。你知道是否有这样的例子吗？
const divWrapper = React.useRef(null);此代码是否返回正确的引用？