反应 RTL.有条件导入 CSS

Question

我正在将RTL合并到我的React应用程序中。我有两个CSS文件，一个用于LTR，一个用于RTL。我有一个下拉菜单，用户从中选择英语版本或阿拉伯语版本。

我坚持如何在用户选择阿拉伯语版本时有条件地导入我的 RTL CSS 文件，并在用户选择英语时返回普通 CSS 文件。

对此的任何帮助或指导将不胜感激

我正在使用 React 和 webpack

问候

Answer 1

我以前遇到过这个问题，我所做的是，当我的主容器挂载时，我检查语言，如果是阿拉伯语，我需要阿拉伯语 CSS 文件，如果不是，我需要另一个。

例：

class Main extends Component {
    componentWillMount() {
         if(this.props.language === 'ar') {
            require('arabic.css');
         } else {
            require('english.css');
         }
    }
}

我也在使用 Redux，这使我更容易获得初始或默认语言，并相应地更改所有其他组件。

只要确保在你的 webpack 配置文件中配置了 CSS 加载器。

Answer 2

使用 React.Lazy 和 React.Suspense 有条件地导入它们。

阅读这篇文章