小编Jol*_*lly的帖子

我正在构建一个基于 Hooks 的 React 应用程序，也利用 TypeScript。
我编写了一个呈现列表的组件，其中props它期望props.items哪种类型是通用的T：

export interface ISelectableListProps<T extends { isDisableInList?: boolean }> {
    /** Specifies the item of the list. */
    items: T[];
    /** Unique REACT key used to re-initialize the component. */
    key?: React.ReactText;
    /** Specifies the template of each item. */
    itemTemplate: (item: T) => JSX.Element;
}

请注意，在界面中，T还 extends { isDisableInList?: boolean }，这是因为每个项目都可能具有该属性，用于禁用列表中的项目。

现在，对于 SelectableList 组件的问题，我想这样写：

const SelectableListComponent: React.FC<ISelectableListProps<T>> = <T extends {}>(props) => { ... …

#login-panel-ghost {
  display: none;
  transition-delay: 2s;
}
.top-menu-login:hover #login-panel-ghost {
  display: block;
  position: fixed;
  width: 250px;
  height: 180px;
  transition-delay: 2s;
}

<span class="top-menu-login">Login
  <div id="login-panel-ghost">
    <h2>Log in!</h2>
    <form>
      <input type="text" placeholder="Username">
    </form>
  </div>
</span>

现在，让我解释一下我要完成的工作：我span .top-menu-login将显示一个短语，在本例中为“登录”。此外，div #login-panel-ghost最初是隐藏的，但是当鼠标经过“登录”时，div应该会出现。

我设法做到了，问题是在鼠标移开“登录”之后，我想延迟元素消失！

到目前为止，我已经在Stack Overflow上尝试过此代码，但是我认为悬停更改另一个事实div会造成麻烦。

PS：我知道使用JavaScript应该很容易，但是我想尝试一下不使用它！

我正在使用 React，在本例中使用的是功能React.forwardRef.
我遇到的问题是，使用 后，在使用 包装的组件时React.forwardRef，我丢失了泛型类型的推断类型。TReact.forwardRef

让我用一个例子来解释一下；采取这个代码：

interface IUser {
    nickname: string;
}

interface IList<TRecord> {
    items: TRecord[];
    children: (item: TRecord) => React.ReactElement;
}

export const List = <TRecord extends unknown>(props: IList<TRecord>) => {
    return (
        <ul>
            {props.items.map(x => <li>{props.children(x)}</li>)}
        </ul>
    );
}

export const MyApp = () => {
    const items : IUser[] = [];
    return (
        <List items={items}>
            {item => <p>{item.nickname}</p>}
        </List>
    );
}

当我在of{item.nickname}内部编写时，TypeScript 可以根据传递给 的props推断出 的类型。returnMyAppitem …

假设我有这张图片：

现在，我要实现的是：当鼠标悬停在特定的切片上时，该切片将变得更大一些，而圆圈的其余部分将变得模糊。

即使使用Javascript，JQuery和CSS，我也真的不知道该怎么做！也许我可以绘制图像，但是我仍然对如何实现所需的功能存有疑问。

圆形图像的4种不同颜色将是4种不同的图像，因此我既可以将它们photoshop在一起，也可以使用HTML使它们看起来像圆形。.我可以同时使用这两种解决方案。

谢谢，抱歉我的英语不好。

我正在尝试找出 React 中的条件渲染。如果用户的观看列表中没有电影，我只想输出一个标题。我认为这样的事情会起作用：

render() {
    return (
        <Container>
            {this.state.watchlist.map(item => {
                if(this.state.watchlist.length > 0) {
                    return (
                        <WatchlistMovie
                            className="watchlist-movie"
                            key={item.id}
                            id={item.id}
                            title={item.title}
                            poster={item.poster}
                            overview={item.overview}
                            rating={item.rating}
                            user={this.props.user}
                        />
                    );
                } else {
                    return <h1>no movies</h1>
                }
            )}}
        </Container>
    );
}