使用Ref渲染模板文字中的React组件

问题描述

我正在使用React中的innerHTML属性更新Ref。我有一个名为<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 && <Spinner name="circle" /> }
        </div>
    );
}

或道具

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

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

,

不要使用.innerHTML-将Spinner放在Drop返回的JSX中：

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;