将 function 附加到 React 中的功能组件

Question

有一个子组件，它是

const Block = () => {}

Block.onClick = (props) => {
  return true/false
} 

Block.onSpan = () => {
  return true/false
}

我们有一个父母，我们称之为DaddyBlock

<DaddyBlock customBlock={Block || undefined} />


const DaddyBlock = ({customBlock}) => {
   if(customBlock){
     handleClick = () => {/where we use result from customBlock.canClick/}
     handleSpan = () => {/where we use result from customBlock.canSpan/}
     const CustomBlock = customBlock;
     return <CustomBlock handleClick={handleClick} handleSpan={handleSpan} {...props} />
   }
   return <DefaultBlock />
}

Answer 1

我认为这样做实际上并没有真正的相关性。 例如，如果你使用 TypeScript，你会使这部分代码的输入更加困难，而且 React 实际上还使用了其他“保留”属性，例如“propTypes”或“displayName”。 这就是为什么你不应该这样做的原因，因为你已经这样做了。

仅用于对这些更干净的元素进行分组的另一种方法如下：

Block.Component = () => {}

Block.onClick = (props) => {
  return true/false
} 

Block.onSpan = () => {
  return true/false
}

现在您没有将属性附加到 React 内部使用的组件，但仍然具有您需要的分组和灵活性。