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

Question

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

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

如您所见，这是我想传递给该组件的覆盖组件，但我不确定它是否可以单独使用并在处理点击时启动。我对 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;

我不确定该怎么做，我正在网上寻找示例，但对我来说没有什么很清楚:(

Answer 1

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

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

例如，而不是使用这个：
<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 2

我试过你的这部分代码...

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

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

我发现这比接受的答案更好，因为它通过参数化额外的连接值解决了问题，而这通常是不希望的并且违反了一般的封装哲学。

Answer 3

使用这个：

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

注意：区分 ' 和 `（称为反引号）。键盘上的这个标志就在 1 和标签上方。

Answer 4

我发现将类放在数组中然后引用它会更整洁：

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

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

How to pass a state className variable to another component in react

reactjs