React - 向子组件添加类答案

【问题标题】：React - adding class to children componentsReact - 向子组件添加类
【发布时间】：2019-12-22 05:44:31
【问题描述】：

我正在使用 react，我有一个组件，它只需要渲染孩子并根据条件为他们添加一个类。最好的方法是什么？

【问题讨论】：

This 应该可以帮到你。

【解决方案1】：

我一周前想通了，这就是我想要的：

export default class ContainerComponent extends React.Component {
    constructor(props) {
        super(props);

        this.modifyChildren = this.modifyChildren.bind(this);
    }

    modifyChildren(child) {
        const className = classNames(
            child.props.className,
            {...otherClassses}
        );

        const props = {
            className
        };

        return React.cloneElement(child, props);
    }
    render() {
        return (<div>
            {React.Children.map(this.props.children, child => this.modifyChildren(child))}
        </div>);
    }
}

【讨论】：

我试过这个解决方案，但是我从渲染函数中得到一个错误，“孩子没有定义。”如果我在那里更改为匿名函数，而不是调用类方法（在您的示例中为 this.modifyChildren），则错误消失并且一切正常。这适用于“胖箭头”和传统的 JS 匿名函数。当我们的代码几乎相同时，无法弄清楚为什么它对你有用而不对我有用。
发现这篇文章可能对其他人有所帮助 - learn.co/lessons/react-this-props-children，看起来像一个类似的解决方案 :)

【解决方案2】：

为了简单起见：

const StyleInjector = ({ children }) => {
   const StyledChildren = () =>
    React.Children.map(children, child =>
      React.cloneElement(child, {
        className: `${child.props.className} ${PUT_YOUR_CLASS_HERE}`
      })
    );

  return <StyledChildren />;
};

【讨论】：

如果你想从外部设置一个额外的类，请将 StyleInjector 的参数替换为 {children, className} 和 PUT_YOUR_CLASS_HERE 为 className。使用示例：<StyleInjector className="classsss"><li>dd1</li><li>dd2</li></StyleInjector>.
@certainlyakey 实际上是故意的，想象一下如果您已经可以访问顶级组件上的 className ，为什么需要用另一个组件包装它？你可以把它给孩子。好吧，可能有一个独特的情况，您可能会根据 Wrapper 的本地状态应用 className。但在这种情况下，我认为这会导致其他开发人员期望应用这些类名。

【解决方案3】：

几周前，我有一个场景要在 react 中实现，没有什么特别的，只是简单地切换活动类。我遵循了这个方法，就像一个魅力，但让我知道这是一个好方法。

{
 this.props.children.map((slide, index) => {
   return React.cloneElement(slide, {
      key: index,
      className: (this.state.currentActiveIndex === index) ?'active' : ''
   });
 })
}

【讨论】：

使用 cloneElement 是 IMO 的最佳方法。您实际上正在使用它的 API。
您的 active className 方法不是我来这里寻找的，但它比我实现的要好。感谢您的帮助！

【解决方案4】：

您可以将一个 prop 向下传递给孩子，它可以选择要应用的类（或者只传递类名，但这更符合语义）：

<Parent contentVisible={true}>
  <Child />
</Parent>

在您的子渲染中：

const classes = [];

if (props.contentVisible)
  classes.push('visible');

<div className={classes.join(' ')} />

【讨论】：

【解决方案5】：

组件的内部渲染方法：

var childClasses = [],
    childClassNames; 
if (condition) {
    childClasses.push('my-class-name'); 
} 
childClassNames = childClasses.join(' ');

return (<div className={childClassNames}>
     .... (your component here)
</div> );

【讨论】：

我不想在每个组件中都这样做，我希望包含它们的组件进行测试并在必要时添加类
不确定您到底想达到什么目的。您的父组件可以计算所有必要的类并将它们作为道具传递给子组件。