反应如何获取和观察正文方向

Question

所以我正在构建一个需要同时支持text direction（ltr和rtl）的组件

在主页面中，我们使用简单的 HTML 和 CSS 来确定文本方向

<div data-testid="mountNode" id="slider-preview" class="virtual-body" dir="rtl">
   ...element
</div>

但是，在我的 React 组件中，我想监视这个目录，以便在里面进行一些操作

const Slider: FC<SliderProps> = props => {
  let isRTL = false;  // I want this to actually reflect the current direction of the page
  return (<div>{isRTL} ? 'RTL' : 'LTR' </div>)
}

所以我的问题是

1/ 如何在javascript中获取当前body方向

2/我有一个改变方向的按钮，基本上会改变div wrapper的dir属性，如何确定什么时候改变，Slider组件也更新了.

谢谢

Answer 1

动态获取dir 取决于您的状态管理方法（props 传播、上下文、mobx、redux 等）。

这是一个简单的 props 传播方法的示例。

function Slider({ dir }) {
  return (
    <div dir={dir}>
    </div>
  );
};

function App() {
  const [dir, setDir] = useState("ltr");
  return (
    <Slider dir={dir} />
  );
}

https://codesandbox.io/s/gallant-sammet-u553m?file=/src/App.js

---

为了观察父 dir 的变化（如果它是外部组件），您可以使用 MutationObserver 来检测 props 的变化并相应地更新状态。

const [direction, setDirection] = React.useState(document.body.dir);
React.useEffect(() => {
  const observer = new MutationObserver((mutationsList, observer) => {
    if (mutationsList.some((mutation) => mutation.attributeName === "dir")) {
      setDirection(document.body.dir);
    }
  });
  observer.observe(document.body, {
    attributes: true
  });
  return () => observer.disconnect();
}, []);

一个工作示例：https://codesandbox.io/s/gracious-sanne-uomlk?file=/src/App.tsx