Question

我想知道您如何构建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
    }
);

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

谢谢

Answer 1

那很好。我通常要做的是将其卸载到组件本身内的其他函数中（除非需要在多个组件之间重用，在这种情况下，我肯定会与您在问题中建议的内容一起使用），并以“呈现”。像这样：

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>
    }
}

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

React中的编码标准

1 个答案: