Рендеринг компонента React внутри шаблонных литералов с использованием Ref

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


const Drop = () => {

    const loadRef = useRef();

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

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

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

.


reactjs javascript react-functional-component
person newbie    schedule 26.08.2020    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

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

или реквизит

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

    return (
        <div>
            {loading && <Spinner name="circle" /> }
        </div>
    );
}
person Boussadjra Brahim    schedule 26.08.2020

arrow_upward
1
arrow_downward

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

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

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

arrow_upward
1
arrow_downward

Для этого вам не нужен внутренний 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;
person Fatih Şennik    schedule 26.08.2020