我正在尝试找出在ReactJS中渲染两个代码块的最佳方法,一个用于桌面,另一个用于移动。在功能上,它们将做完全相同的事情,但它们周围有不同的标记,例如轮播,其在移动设备上的呈现方式会有所不同。

我正在使用map函数遍历对象属性,下面有工作代码,但我正在复制变量并重新分配相同的值,这显然对我为每个代码块执行此操作效率低下。

有人可以建议一种做我所需的好/最佳实践方法吗?

对不起基本问题!

render: function() {
return (
    <div>
        <div className="hidden-xs">
            {
                this.state.userItems.map(function (item) {

                    var someValue = 'value' in item ? item.value : '';
                    var anotherValue = 'anotherValue' in item ? item.anotherValue : '';

                    return (
                        <div key={someValue}>
                            {someValue}<br>{anotherValue}
                        </div>
                    )
                })
            }
        </div>
        <div className="visible-xs">
            {
                this.state.userItems.map(function (item) {

                    var someValue = 'value' in item ? item.value : '';
                    var anotherValue = 'anotherValue' in item ? item.anotherValue : '';

                    return (
                        <div key={someValue}>
                            <div className="differentMarkup">
                              {someValue}<br>{anotherValue}
                            </div>
                        </div>
                    )
                })
            }
        </div>
    </div>
)}

最佳答案

更新的答案:

如果内部项目可以具有不同的标记,我会说这取决于它们的标记将有多大差异。例如,您可能有两种单独的方法来分别准备项目的移动和非移动版本的标记。像这样:

renderUserItem: function(itemData) {
    return (
        <div key={itemData.someValue}>
            {itemData.someValue}<br>{itemData.anotherValue}
        </div>
    )
},

renderMobileUserItem: function(itemData) {
    return (
        <div key={itemData.someValue}>
            <div className="differentMarkup">
                {itemData.someValue}<br>{itemData.anotherValue}
            </div>
        </div>
    )
},

prepareItemData: function(item) {
    return {
        someValue: item.value ? item.value : '';
        anotherValue: item.anotherValue ? item.anotherValue : '';
    };
},

render: function() {
    // Prepare the variables you will need only once
    let parsedUserItems = this.state.userItems.map(this.prepareItemData);

    return (
        <div>
            <div className="hidden-xs">
                { parsedUserItems.map(this.renderUserItem) }
            </div>
            <div className="visible-xs">
                { parsedUserItems.map(this.renderMobileUserItem) }
            </div>
        </div>
    )
}


如果移动设备与非移动设备之间的差异不太大,则也可以使用一种方法。例如,使用ES6箭头功能:

renderUserItem: function(itemData, renderWrapper) {
    return (
        <div key={itemData.someValue}>
            {renderWrapper ? <div className="differentMarkup"> : ''}
                {itemData.someValue}<br>{itemData.anotherValue}
            {renderWrapper ? </div> : ''}
        </div>
    )
},

render: function() {
    // Prepare the variables you will need only once
    let parsedUserItems = this.state.userItems.map(this.prepareItemData);

    return (
        <div>
            <div className="hidden-xs">
                { parsedUserItems.map(item => this.renderUserItem(item, false)) }
            </div>
            <div className="visible-xs">
                { parsedUserItems.map(item => this.renderUserItem(item, true)) }
            </div>
        </div>
    )
}







原始答案如下:

如果我理解正确,并且内部项目具有相同的标记,则可以将传递到map的函数提取到单独的方法:

renderUserItem: function(item) {
    var someValue = 'value' in item ? item.value : '';
    var anotherValue = 'anotherValue' in item ? item.anotherValue : '';

    return (
        <div key={someValue}>
            {someValue}<br>{anotherValue}
        </div>
    )
},

render: function() {
    return (
        <div>
            <div className="hidden-xs">
                { this.state.userItems.map(this.renderUserItem) }
            </div>
            <div className="visible-xs">
                { this.state.userItems.map(this.renderUserItem) }
            </div>
        </div>
    )
}

07-24 09:46
查看更多