React 如何获取和观察正文方向

Question

所以我正在构建一个需要支持文本方向（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 中获取当前主体方向

2/ 我有一个改变方向的按钮，基本上，它会改变 的dir属性div wrapper，如何确保当它改变时，Slider组件也会更新。

Answer 1

动态获取dir取决于您的状态管理方法（道具传播、上下文、mobx、redux 等）。这是一个简单的道具传播方法的例子。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来检测道具的变化并相应地更新状态。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();}, []);