Question

我正在使用react，我有一个组件只需要渲染子项并根据条件为它们添加一个类。这是最好的方式吗？

Answer 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>);
    }
}

Answer 2

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

private void button1_Click(object sender, EventArgs e)
        {
            int acorns = int.Parse(textBox1.Text);
            if (acorns >= 40 && (System.DateTime.Today.DayOfWeek == DayOfWeek.Saturday || System.DateTime.Today.DayOfWeek == DayOfWeek.Sunday || acorns  <= 60))
            {

                MessageBox.Show("Good Party");
            }
            else
            {
                MessageBox.Show("Terrible Party");
            }
        }

Answer 3

你可以将一个道具传递给孩子，它可以选择要应用的类（或者只是传递类名，但这更具语义性）：

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

在您的孩子渲染中：

const classes = [];

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

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

Answer 4

组件的内部渲染方法：

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

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

Answer 5

为简单起见：

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

  return <StyledChildren />;
};

React - 为子组件添加类

5 个答案: