reactjs - 我什么时候应该通过 'className' Prop 来 react 组件？

Question

一些 react 组件通过了 类(class)名称子组件的 Prop 。
我没有看到任何需要通过className作为我项目中的 Prop 。
为什么会这样 className Prop 被使用了吗？我什么时候应该采用这种方法？

import styled from 'styled-components' 

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

const StyledComponent = styled(ReactComponent)``;

Answer 1

这真的取决于上下文，但一般来说，className prop 从父级传递给子级以覆盖或附加现有的 className在子组件上。
这在您构建 的场景中特别有用。可重复使用 需要轻松扩展和定制的基础组件。
鉴于你的例子，

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

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

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

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