Reactjs 如何将状态className变量传递给react中的另一个组件

我不确定这是否是最好的方法，但我想在react中将一个类名变量传递给另一个组件

这是一个按钮，只需将一个类名添加到其中的几个元素中即可启动动画。我还创建了var=overlay this.state.cliked？“打开“：”启动覆盖，如果我在同一个组件上有覆盖html，它可以正常工作，但我必须尽可能少地使用组件

var React = require('react');
var OverlayView = require('./OverlayView.jsx');

var StatusBarButtonView = React.createClass({
    getInitialState: function() {
    return {cliked: false};
    },
    handleClick: function(event) {
    this.setState({cliked: !this.state.cliked});
    },
    render: function() {
    var fondo = this.state.cliked ? 'active' : '';
    var overlay = this.state.cliked ? 'open' : '';

        return (
            <div>
                <div className={"statusbar-button-container " + (fondo)} onClick={this.handleClick}>
                    <img src="images/navbar-element-icon-cross.png" className={"rotate " + (fondo)}/>
                </div>      
            </div>
            <OverlayView className={overlay} />
        );
    }
});

module.exports = StatusBarButtonView; 

var React=require（'React'）；
var OverlayView=require（'./OverlayView.jsx'）；
var StatusBarButtonView=React.createClass({
getInitialState:函数（）{
返回{cliked:false}；
},
handleClick:函数（事件）{
this.setState（{cliked:！this.state.cliked}）；
},
render:function（）{
var fondo=this.state.cliked？'active'：''；
var overlay=this.state.cliked？'open'：''；
返回(
);
}
});
module.exports=StatusBarButtonView；

正如你所看到的，这是覆盖的组成部分，我想传递给这个组成部分，但我不确定它是否可以单独启动，当这一个处理点击。我对react有点迷茫，没有太多的在线信息，我对这个很陌生

这是覆盖组件：

var React = require('react');

var OverlayView = React.createClass({

        return (    
            <div className={"overlay overlay-slidedown " + this.props.class}>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Clients</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        );
    }
});

module.exports = OverlayView;

var React=require（'React'）；
var OverlayView=React.createClass({
报税表（







);
}
});
module.exports=覆盖视图；

---

我不知道如何做到这一点，我在网上寻找一些例子，但对我来说还不是很清楚：（

在组件之间以字符串形式传递类名，甚至在同一组件中附加类名，这很容易出错，也不理想。我建议使用classSet（）助手：

在您的情况下，理想情况下，您应该传递一个描述组件状态的属性，而不是将类属性传递给OverlayView组件。在OverlayView组件中，使用类集帮助器计算要应用的正确类

例如，不使用此选项：

您只需传入状态变量：

在OverlayView组件中，然后使用className助手创建一个classes对象：

var classes = cx({
   'overlay': true,
   'overlay-slidedown': true,
   'open': this.props.isOpen
});

并更改render（）函数中的行以使用classes对象：

...
<div className={classes}>
...

。。。
...

我尝试了你的这部分代码

    return (    
        <div className={"overlay overlay-slidedown " + this.props.class}>
     );

返回（
);

它似乎非常适合我。它解决了我的问题：当我想在某个静态文本旁边显示道具时，道具无法插入

我发现这比公认的答案要好，因为这通过参数化额外的concat'd值解决了问题，而这通常是不需要的，并且违背了一般的封装原理。

使用以下方法：

<div className={`statusbar-button-container ${fondo}`} onClick={this.handleClick}>

---

注意：区分“和”（称为反勾号）。键盘上的这个符号只保留在1和选项卡上方。

我发现将类放在数组中，然后引用以下内容更为整洁：

const styles=[
“集装箱”，
“px-4”，
“h-1/3”，
这是道具课
]
返回(
你好
)

谢谢，问题是我不理解react教程的类集示例，因为它看起来不完整，我看到了类，但我不知道这些类是如何应用的。我需要一个工作示例或更清楚的东西来理解它。你能给出一个示例吗？更新了我的答案以包含一个示例。你是对的，现在我类集（类名）是否进行了类切换，效果很好。现在我必须尝试将状态道具传递到覆盖。效果非常好，我学会了如何使用react进行更多操作，这太棒了！！非常感谢@subeeshbGlad的帮助：）