Question

我不确定这是否是做事的最佳方式，但我想将一个类名变量传递给另一个反应组件。

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

我不知道该如何做到这一点，即时寻找网络上的例子，但对我来说一点都不清楚：（

Answer 1

使用此：

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

注意：在'和'之间做出区别（称为反引号）。键盘上的这个标志只留在1和标签上方。

Answer 2

将类名作为字符串传递给组件，甚至在同一组件中追加类名是容易出错的，并不理想。我建议使用classSet（）帮助器：https://facebook.github.io/react/docs/class-name-manipulation.html

在您的情况下，您应该理想地传递描述组件状态的prop，而不是将类prop传递给OverlayView组件。在OverlayView组件中，使用classSet帮助程序计算要应用的正确类。

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

在OverlayView组件中，您将使用className helper创建一个classes对象：

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

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

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

Answer 3

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

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

它对我来说似乎很完美。它解决了我的问题：当我想在一些静态文本旁边显示它时，道具无法插值。

我发现这比接受的答案更好，因为这通过参数化额外的concat值来解决问题，当这通常是不希望的并且与一般的封装原则相反时。

Answer 4

我发现将类放置在数组中，然后引用它更整洁了

name="SplashScreenTheme"

如何将状态className变量传递给react

4 个答案: