如何判断react-embed组件针对指定URL是否会渲染内容？

方法1：调用库内置的URL检测函数 #

多数嵌入类库会暴露内部的URL校验逻辑，你可以查看react-embed的文档或源码，找到类似isUrlSupported或getProvider的函数，直接传入URL判断是否支持。

示例（假设库暴露了isSupported方法）：

import { isSupported } from 'react-embed';

const embeddable = isSupported(item.link);

方法2：通过自定义Void Renderer标记状态 #

react-embed无法渲染内容时会触发ReactEmbedVoidRenderer，你可以自定义这个渲染器来设置判断标记：

import { useState, useEffect } from 'react';
import Embed from 'react-embed';
import ReactDOMServer from 'react-dom/server';

function checkIfEmbeddable(url: string): Promise<boolean> {
  return new Promise((resolve) => {
    const voidRenderer = () => {
      resolve(false);
      return null;
    };

    // 触发组件渲染逻辑，若不支持会调用voidRenderer
    ReactDOMServer.renderToString(
      <Embed url={url} voidRenderer={voidRenderer} />
    );

    // 若支持则不会触发voidRenderer，设置超时兜底确认
    setTimeout(() => resolve(true), 100);
  });
}

// 使用示例
const [embeddable, setEmbeddable] = useState(false);

useEffect(() => {
  checkIfEmbeddable(item.link).then(setEmbeddable);
}, [item.link]);

方法3：渲染后通过DOM判断 #

在组件内部，可以通过ref获取容器DOM，检查是否生成了嵌入内容：

import { useRef, useEffect, useState } from 'react';
import Embed from 'react-embed';

function EmbeddableChecker({ url }: { url: string }) {
  const embedContainerRef = useRef<HTMLDivElement>(null);
  const [embeddable, setEmbeddable] = useState(false);

  useEffect(() => {
    if (embedContainerRef.current) {
      // 检查是否存在iframe或其他嵌入相关元素
      const hasContent = embedContainerRef.current.querySelector('iframe, [data-embed-type]') !== null;
      setEmbeddable(hasContent);
    }
  }, [url]);

  return (
    <div ref={embedContainerRef}>
      <Embed url={url} />
    </div>
  );
}

原方法无效的原因 #

你直接判断<Embed>元素是否为null没有意义，因为JSX语法生成的是React.ReactElement类型的对象，永远不会是null。组件是否渲染内容是在渲染阶段决定的，而非创建元素的时刻。

内容的提问来源于stack exchange，提问作者pirmas naujas