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

Question

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

这是一个按钮,它启动动画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;

我不知道该怎么做,我在网上寻找例子,但对我来说没什么好看的:(

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帮助程序创建一个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'd 值解决了问题，这通常是不希望的，并且违反了一般的封装理念。