Question

我试图找出在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>
)}

Answer 1

更新回答：

如果内部项目可以有不同的标记，我会说它取决于它们的标记有多么不同。例如，您可以使用两种单独的方法分别准备移动和非移动版本的项目的标记。像这样：

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

在ReactJS中重用map循环中的属性 - 最佳实践

1 个答案: