Question

目标：

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

我真的很希望能够在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组件从该组件中找到目录？

Answer 1

由于我没有足够的意见要发表，所以我将其发布为答案。

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

如果您正在使用功能组件，则可以使用useState钩子

如果您将“ dir”存储为属性，请尝试

divWrapper.getAttribute('dir');

希望这会有所帮助

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

1 个答案: