Question

这是一个简单的HOC NotEmpty：

const NotEmpty = ({value,children}) =>{
    return (value ? children : null);
};

此HOC的目的是防止在值为null或未定义时显示子项所以，这将起作用

<NotEmpty value={thread}>
    <p>Hello World</p>
</NotEmpty>

但不是这样：

<NotEmpty value={thread}>
    <p>{thread.title}</p>
</NotEmpty>

Uncaught TypeError: Cannot read property 'title' of undefined

那么我的NotEmpty HOC有什么问题以及如何修复它？

Answer 1

那么我的NotEmpty HOC有什么问题以及如何修复它？

您直接接受children，因此应在调用NotEmpty之前计算它们，并且该计算会产生错误。您可以传递生成内容的lambda并延迟计算：

const NotEmpty = ({condition, render}) =>{
  return (condition ? render() : null);
};

并使用它：

<NotEmpty 
   condition={thread} 
   render={() => <p>{thread.title}</p>}/>

您还可以通过children将lambda传递给：{/ p>

<NotEmpty condition={thread}>
   {() => <p>{thread.title}</p>}
</NotEmpty>

Answer 2

那个问题不是你的HOC。问题是<NotEmpty value={thread}> <p>{thread && thread.title}</p> </NotEmpty>可能是线程没有属性Category。我已经在这里测试了 https://codesandbox.io/s/w0q8l59ykl。您可以更改此项以防止错误

class Category extends Model
{
    // we consider item table has `category_id` field to maintain relationship  
    public $hasMany = [
        'items' => ['Yournamespace\Item']
    ];
}

为什么我的HOC NotEmpty在访问属性时不起作用？

2 个答案: