小编Fra*_*ier的帖子

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

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

我有一个从另一个React组件启动的叠加层,它有一个也会自行更改的按钮.当用户单击按钮时,会发生更改,然后按钮会更改其类名.它还向作为叠加层的子组件发送prop值.叠加层根据属性添加一个类,如果单击它.Everthing工作得很好,但现在我必须做另外一件事.当用户点击叠加层时,它必须关闭.在此更改之前,所有内容都适用于我之前提到的按钮.

那么这是按钮组件:

export default class StatusBarButton extends React.Component {

    constructor(props) {
        super(props)
        this.state = {active: false}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ active: !this.state.active });
    }

    render() {
        var cx = require('classnames');
        var button = cx ({
            'statusbar-button-container' : true,
            'active' : this.state.active
        });
        var animation = cx ({
            'statusbar-button-cross-image' : true,
            'rotate' : true,
            'active' : this.state.active
        });

        return (
            <div className="astatusbar-center-wrapper">
                <div className={button} onClick={this.handleClick}>
                    <img src="images/navbar-element-icon-cross.png" className={animation}/>
                </div>      
                <OverlayView isOpen={this.state.active} />
            </div>
        );
    }
}

而这就是目前的叠加:

export …

我有React的性能问题,基本上我有2个紧凑的菜单,当页面滚动到距离顶部x距离时.正如我所看到的,当我滚动时,Web应用程序的另一个组件正在做很少的动作,原因是它们正在重新渲染.

要知道当用户进行滚动时到顶部的距离我在componentDidMount()上有一个eventlistener,我认为这导致了问题,但我不确定,因为你知道反应稳定的版本是相当新的,我'这也是这项技术的新成员:

下面是一些代码,正好是嵌套组件的顶部栏,当用户从顶部滚动超过100px时触发紧凑菜单栏:

export default class AppTopBar extends Component {
    constructor (props){
        super(props);
        this._bind("_handleOnScrollDocument");
        this.state = {
            StatusBar: false
        }
    }

    componentDidMount() {
        if (process.env.BROWSER) {
            document.addEventListener("scroll", (e) => this._handleOnScrollDocument(e), true);
        }
    }

    _handleOnScrollDocument(e) {
        if (e.target.body.scrollTop > 100) {            
            this.setState({ StatusBar: true }); 
        } else {
            this.setState({ StatusBar: false });
        }
    }

    render() {
        return (
            <div className="aui-core-apptopbar">
                <StatusBar companies={this.props.companies} compactMenuItems={this.props.compactMenuItems} StatusBar={this.state.showCompactStatusBar}/>
                <StatusBar companies={this.props.companies} userOptions={this.props.userOptions} compactMenuItems={this.props.compactMenuItems}/>
                <MainNavBarView menuItems={this.props.menuItems}/>
            </div>
        );
    }
}

我一直在研究和阅读有关组件生命周期和其他性能的信息:PURERENDERMIXIN

您是否知道更好的方法来获取轻量级Web应用程序并避免重新呈现滚动？

我有一个按不同类别分组的数组,每个类别都嵌套了更多具有不同值(数字和字符串)的对象,我必须减少它们(字符串除外).Reduce工作正常,数值为总和,但它会覆盖保留最后一个的字符串值.

我正在尝试按类别缩小对象/字典并使用每个类别的单位总和填充表格,但如果子类别和名称不同,则不要求它们.

这是一个演示:

var data = {
  'Category xxxx': [
    {
      units: 1234,
      subcategory: 'wolves',
      name: 'Starks'
    },
    {
      units: 1345354,
      subcategory: 'wolves',
      name: 'Starks'
    },
   {
      units: 666,
      subcategory: 'dragons',
      name: 'Targaryens'
    }
  ], 
  'Category yyyy': [
    {
      units: 7783,
      subcategory: 'lions',
      name: 'Lanisters'
    },
    {
      units: 1267878,
      subcategory: 'spires',
      name: 'Martells'
    }
  ]
}

var test = _.map(data, function (value, key) {
  var returnedData = {
    Category: key,
    units: _(value).reduce(function (memo, metrics) {
      return memo + metrics.units;
    }, …