如何将状态类名称变量传递给反应中的另一个组件答案

【问题标题】：How to pass a state className variable to another component in react如何将状态类名称变量传递给反应中的另一个组件
【发布时间】：2015-04-24 08:24:25
【问题描述】：

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

这是一个启动动画 onClick 的按钮，只需将一个 className 添加到它的几个元素。我还创建了 var = overlay this.state.cliked ？ 'open' : '' 启动覆盖，如果我在同一个组件上有覆盖 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;

如您所见，这是我想要传递给该组件的叠加层组件，但我不确定它是否可以单独运行并在该组件处理点击时启动。我有点迷失了反应，没有那么多在线信息，我对此很陌生。

这是 Overlay 组件：

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;

我不知道该怎么做，我在网上寻找例子，但对我来说没有什么很清楚的:(

【问题讨论】：

标签： reactjs

【解决方案1】：

使用这个：

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

注意：区分 ' 和 `（称为反引号）。键盘上的这个标志就在 1 及以上的选项卡上。

【讨论】：

【解决方案2】：

在组件之间将类名作为字符串传递，甚至在同一个组件中附加类名是容易出错且不理想的。我建议使用 classSet() 助手：https://facebook.github.io/react/docs/class-name-manipulation.html

在您的情况下，最好不要将类 prop 传递给 OverlayView 组件，而应该传递一个描述组件状态的 prop。在 OverlayView 组件中，使用 classSet 帮助器计算要应用的正确类。

例如，不要使用这个：
<OverlayView className={overlay} />
你可以简单地传入状态变量：
<OverlayView isOpen={this.state.cliked} />

在您的 OverlayView 组件中，您将使用 className 帮助器创建一个类对象：

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

并更改您的 render() 函数中的行以使用 classes 对象：

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

【讨论】：

谢谢，问题是我不理解 react 教程的 classSet 示例，因为它看起来不完整，我看到了这些类，但我看不到这些类是如何应用的。我需要一个工作示例或更清楚的东西来理解它。能举个例子吗？？
更新了我的答案以包含一个示例。
你是对的，目前我使用 classSet (classnames) 来进行类切换，它工作正常。现在我必须尝试将 state 属性传递给叠加层。
完美运行，我学会了如何用反应做更多的事情，这太棒了！非常感谢@subeeshb
很高兴有帮助:)

【解决方案3】：

我尝试了你的这部分代码...

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

而且它似乎对我很有效。它解决了我的问题：当我想在一些静态文本旁边显示一个道具时，它无法插入。

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

【讨论】：

【解决方案4】：

我发现将类放在一个数组中更简洁，然后引用它：

const styles = [
    "container",
    "px-4",
    "h-1/3",
    this.props.class
]
return (
    <div className={styles.join(" ")}>
        Hello!
    </div>
)

【讨论】：