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();

}, []);