我什么时候应该将 'className' 属性传递给反应组件？

Question

一些 React 组件将className属性传递给子组件。我没有看到任何需要className在我的项目中作为支柱传递。

className为什么使用这个道具？我什么时候应该采用这种方法？

import styled from 'styled-components' 

const ReactComponent = ({ className }) => {
  return <div className={className}/>
}

const StyledComponent = styled(ReactComponent)``;

Answer 1

这实际上取决于上下文，但通常，className道具从父组件传递到子组件以覆盖或附加className子组件上的现有组件。

当您构建需要轻松扩展和自定义的可重用基础组件时，这特别有用。

鉴于你的例子，

const ReactComponent = ({ className }) => {
  return <div className={className}/>
}

假设我们有一个渲染子组件的父组件ReactComponent，我们需要为此实例自定义样式：

return (
  <div className='container'>
    <ReactComponent className='is-red' />
    <ReactComponent className='is-blue'/>
  </div>
)

这将允许父级以不同的样式渲染两个组件，而无需重复相同的代码。