Question

我有一个非常复杂的组件，我想防止在那里传递React组件和使用React组件创建的样式化组件。我要允许的唯一组件是1）其他“简单”样式的组件2）本机标记（例如div）。例如：

function SophisticatedComponent({
  element,
}) {
  if (isReactComponent(element)) {
    throw new Error('React components are forbidden!');
  }
  ...
}


function ReactComponent() {
  return (
    <div/>;
  );
}

<SophisticatedComponent element={<ReactComponent/>}/> // THROW

<SophisticatedComponent element={<div><ReactComponent/></div>}/> // OK

const StyledComponent = styled.div``;
<SophisticatedComponent element={<StyledComponent><ReactComponent/></StyledComponent>}/> // OK

const StyledReactComponent = styled(ReactComponent)``;
<SophisticatedComponent element={<StyledReactComponent/>}/> // THROW

如何编写此isReactComponent函数以区分React组件和样式化组件？

Answer 1

这是功能：

function isReactComponent({type}) {
  if (typeof type === 'string') { // <div><ReactComponent/></div>
    return false;
  }
  if (typeof type === 'object') { // <ReactComponent/>
    return true;
  }
  if (typeof type === 'function' && typeof type.target === 'string') { // <StyledComponent><ReactComponent/></StyledComponent>
    return false;
  }
  if (typeof type === 'function' && typeof type.target === 'object') { // <StyledReactComponent/>
    return true;
  }
}

如何区分样式组件是使用React组件还是其他样式组件/本机标签创建的

1 个答案: