时间戳

首页 > 解决方案 > React 中的编码标准

reactjs - React 中的编码标准

问题描述

我想知道你如何构建你的 React 代码。我在写一个简单的组件，虽然我写了很多类似的组件，但这次我想到了两种可能性。

{this.state.scrollY > 200 ? 
    <div className={style.MobileMenu}>
        <FontAwesomeIcon icon={faBars} />
    </div> :
    null
}

如果 scrollY 属性的状态中存储的值超过 200，这将呈现一个 div。很好，但是如果我的组件中有更多条件渲染，我觉得这可能会导致代码不可读。所以我真正的问题是，将 UI 的那部分的渲染逻辑委托给这样的无状态组件是否会更好：

import React from 'react';

export default ({scrollY}) => (
    {scrollY > 200 ? 
        <div className={style.MobileMenu}>
            <FontAwesomeIcon icon={faBars} />
        </div> :
        null
    }
);

然后只需将该组件导入其父级。是常识吗，有用吗？

谢谢

标签： reactjs

解决方案

那完全没问题。我通常做的是，我将把它卸载到我的组件本身的不同函数中（除非它需要在多个组件之间重用，在这种情况下，我肯定会使用你在问题中建议的内容），名称前缀为 '使成为'。像这样 ：

export default class MyComponent extends Component {
    renderSomethingAwesome() {
        const {scrollY} = this.props;
        return {
            scrollY > 200 ? 
            <div className={style.MobileMenu}>
                ...
            </div> :
            null
        }
    }

    render () {
        return <div>
            {this.renderSomethingAwesome()}
        </div>
    }
}

在上面的示例中，我使用了一个类方法，但您也可以将其设为静态函数，而不是直接访问道具，您可以从渲染函数本身传递它

推荐阅读