Question

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

当用户选择阿拉伯语版本并在用户选择英语时返回正常的CSS文件时，如何有条件地导入我的RTL CSS文件，我很困惑。

对此的任何帮助或指导都将受到高度赞赏

我正在使用React＆amp;的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有条件地导入它们。

Read this article

反应RTL。条件导入CSS

2 个答案: