te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - typing svg element react in an object - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - typing svg element react in an object - Stack Overflow

    javascript - typing svg element react in an object - Stack Overflow

    programmeradmin3浏览0评论

    I am having issues typing the following.

    The issue is with the TeamIcon.

    My object is defined as follows.

    import TeamIcon from './ponents/icons/TeamIcon';

export const teamObject: Record<
  string,
  Record<string, string | React.ReactSVGElement>
> = {
  team: {
    icon: TeamIcon,
    color: '#B2649B',
  }
}

    My TeamIcon looks like this:

    export default (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="18" height="14" viewBox="0 0 18 18" {...props}>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

    Then the following error is being displayed:

    JSX element type 'Icon' does not have any construct or call signatures.

    const Icon = currentTeam.icon;

<Icon
  width="29px"
  height="29px"
  style={{ color: currentTeam.color }}
/>

    Does anyone know how to type this correctly?

    I am having issues typing the following.

    The issue is with the TeamIcon.

    My object is defined as follows.

    import TeamIcon from './ponents/icons/TeamIcon';

export const teamObject: Record<
  string,
  Record<string, string | React.ReactSVGElement>
> = {
  team: {
    icon: TeamIcon,
    color: '#B2649B',
  }
}

    My TeamIcon looks like this:

    export default (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="18" height="14" viewBox="0 0 18 18" {...props}>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

    Then the following error is being displayed:

    JSX element type 'Icon' does not have any construct or call signatures.

    const Icon = currentTeam.icon;

<Icon
  width="29px"
  height="29px"
  style={{ color: currentTeam.color }}
/>

    Does anyone know how to type this correctly?

    • javascript
    • reactjs
    • typescript
    Share Improve this question edited Feb 5, 2020 at 20:55 peter flanagan asked Feb 5, 2020 at 20:41 peter flanaganpeter flanagan 9,79027 gold badges81 silver badges139 bronze badges 11
    • Can you put this up in typescriptlang/play/index.html as a minimal example and put the link here? – Alex Wayne Commented Feb 5, 2020 at 20:56
    • sure, although could be tricky as it's react. Leave it with me – peter flanagan Commented Feb 5, 2020 at 20:57
    • React works fine – Alex Wayne Commented Feb 5, 2020 at 21:00
    • ah, in the meantime I have got this working for you - codesandbox.io/s/cool-dewdney-tvme5 you can see the errors if you hover over the red and yellow underlined code. Let me know if that works, otherwise can add something to this ts playground.Tbh the code sandbox is showing the exact same error – peter flanagan Commented Feb 5, 2020 at 21:04
    • 1 Yes. You use it twice in your type for teamObject. Record takes a union of strings as property names and a type, and sets the types of all those property names to that type. That isn't what you want when you have properties with very different types that you can easily know in advance. – Alex Wayne Commented Feb 5, 2020 at 21:18
     |  Show 6 more ments

    1 Answer 1

    Reset to default 13

    TeamIcon isn't a type here, it's the name of local variable, that has value of a React functional ponent.

    So I think you want something like this, which is the type of a React functional ponent, with props of your choosing.

    icon: React.FC<React.SVGProps<SVGSVGElement>>

    A full example would be something like:

    interface TeamObject {
  team: {
    icon: React.FC<React.SVGProps<SVGSVGElement>>,
    color: string,
  }
}

const teamObject: TeamObject = {
  team: {
    icon: TeamIcon,
    color: "#B2649B"
  }
};

    Working example

    You'll note that I got rid of this:

    Record<
  string,
  Record<string, string | React.ReactSVGElement>
>

    I'm not really sure what the goal of that was, but you clearly have two properties with very different types. You have icon which is a function that returns React.ReactNode and you have color which is a string. So you should be typing those explicitly.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论