Блог

Я обновляю атрибут, innerHTML используя Ref , в react. У меня есть компонент с именем as, <Spinner> который я хотел бы вставить в div элемент, как показано ниже :

 
const Drop = () => {

    const loadRef = useRef();

    const loadFiles = () => {
        loadRef.current.innerHTML = `<Spinner name="circle" />`
        // ... other actions 
    }

    return (
        <div ref={loadRef}></div>
    )
}
  

Как я могу это сделать?

.

Использование innerHTML не будет отображать это содержимое как компонент React, оно будет отображаться как текст. я рекомендую использовать условный рендеринг на основе некоторого состояния или реквизита :

 const Drop = () => {
    const [loading, setLoading] = useState(false);
    const loadFiles = () => {
        setLoading(true);
       
    };

    return (
        <div>
            {loading amp;amp; <Spinner name="circle" /> }
        </div>
    );
}
  

или prop

 const Drop = ({loading,setLoading}) => {
    
    const loadFiles = () => {
        setLoading(true);
       
    };

    return (
        <div>
            {loading amp;amp; <Spinner name="circle" /> }
        </div>
    );
}
  

Не используйте .innerHTML — поместите возвращаемый JSX Spinner внутрь Drop :

 const Drop = () => {
    const [showingSpinner, setShowingSpinner] = useState(false);
    const loadFiles = () => {
        setShowingSpinner(true);
        // ... other actions 
    };

    return (
        <div>
            {showingSpinner ? <Spinner name="circle" /> : null}
        </div>
    );
}
  

Для этого вам не нужен внутренний Html. Вы можете попробовать это

 import React,{useState } from 'react';
import Spinner from 'Your Spinner'; // Your Spinner Module

function App() {
  
  const [spinner, setSpinner] = useState(false);
  
  const showSpinner = () => {
    
    setSpinner(true);
    
  }

  return (
    <div>
      <button onClick={() => showSpinner()}>Show Spinner</button>
     
       // Tenary Operation
       {spinner ? <Spinner name="circle" /> : null}
    </div>
  )
}




export default App;