TypeError：无法读取离子应用程序 null 的属性“样式”答案

【问题标题】：TypeError: Cannot read property 'style' of null of ionic appTypeError：无法读取离子应用程序 null 的属性“样式”
【发布时间】：2021-10-21 15:26:22
【问题描述】：

我制作了一个离子应用程序，我想在其中动态更改 IonLoading 的背景颜色。但它显示了这个错误。

请告诉我如何解决这个问题。这是我的代码：

import React, { useEffect, useState } from 'react';
import { IonContent, IonLoading } from '@ionic/react';
import './Preloader.css'

const Preloader = (props) => {
const { showLoading, loadingTime } = props;
const [loaderData, setLoderData] = useState([]);
useEffect(() => {
fetch('myurl')
  .then(res => res.json())
  .then(data => setLoderData(data.content.preloader))
  .catch(error => console.error(error))
}, [])

const el = document.querySelector('.my-custom-class');
el.style.setProperty('--background', `${loaderData.bg_color}`); 
return (
  <IonContent>
  <IonLoading
    cssClass='my-custom-class'
    isOpen={showLoading}     
    spinner= {null}
    duration={loadingTime}
    showBackdrop={false}
    backdropDismiss={true}
    message={`<img src='${loaderData.logo}'/>`}
  />     
       
 </IonContent>
 
);
};

export default Preloader;

【问题讨论】：

不要在你的 React 应用中使用 DOM 方法。请改用ref

标签： javascript reactjs ionic-framework ionic4 ionic5

【解决方案1】：

因为document.querySelector('.my-custom-class') 可以返回元素或空值。所以使用前需要检查。你应该把它包装成useEffect，以确保它只在必要时调用

useEffect(() => {
  const el = document.querySelector('.my-custom-class');
  el.style?.setProperty('--background', `${loaderData.bg_color}`); 
}, [loaderData.bg_color])

【讨论】：