Question

我正在尝试创建一个简单的React HOC，以基于Redux状态下是否存在特定值来决定是否渲染组件。

我的HOC看起来像这样：

const HOC = (ComponentA, value, ComponentB) => {
    const wrapper = props => {
        props.componentDecision.key === value ? (
            <ComponentA {...props} />
        ) : (
            <ComponentB {...props} />
        );
    };

    return connect(({ componentDecision }) => ({ componentDecision }), null)(wrapper);
};

与路线等配合使用时，一切正常，但是对于React-Bootstrap Tabs之类的组件，我无法使用HOC隐藏/将道具传递给选项卡，就像这样：

<Tabs ...>
 <Tab ..>
 {HOC(Tab, 'dynamicTab', null)} // passing null to hide it if value isn't dynamicTab
</Tabs>

我认为问题是由于Redux的connect() HOC返回了。我尝试通过扩展ComponentA并返回super.render()在HOC中进行继承反转，以免在DOM树中引入connect()，但是这样做必须处理Redux的store.getState()， store.unsubscribe()等

做这种事情的更好的方法是什么？如何创建此HOC以连接到redux状态，但仍返回传入的原始组件？将props作为函数args传递到我的HOC看起来不太好。

Answer 1

与Routes一起使用时，您只需要将组件传递到Route上，但是在render函数中，您需要将其渲染为

$(function() {
    $('form').on('submit', function(e){
        event.preventDefault()
        $.ajax({
            url: '/search',
            data: $('form').serialize(),
            type: 'POST',
            contentType: "application/json",
            dataType: "json",
            success: function(response) {
            $.each(response, function(i, item) {
                $('#myTable').append(
                    $('<td>').text(item[0].startchass),
                    $('<td>').text(item[0].cusname),
                    $('<td>').text(item[0].chassistype1),
                    $('<td>').text(item[0].axleqty),
                    $('<td>').text(item[0].tyres),
                    $('<td>').text(item[0].extlength),
                    $('<td>').text(item[0].neck),
                    $('<td>').text(item[0].stepheight),
                    $('<td>').text(item[0].reardeckheight),
                    $('<td>').text(item[0].siderave),
                    $('<td>').text(item[0].steer),
                    $('<td>').text(item[0].sockets),
                    $('<td>').text(item[0].containertwistlock),
                    $('<td>').text(item[0].headboard),
                )
                    console.log(response[i]); // idk if this works...
            });
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

，然后进入组件渲染方法；

const DynamicTab = HOC(Tab, 'dynamicTab', null);

反应Redux HOC

1 个答案: