小编Nik*_*las的帖子

我无法在移动浏览器上播放我的视频。使用 Safari 远程调试时，我遇到以下问题：

Unhandled Promise Rejection: AbortError: The operation was aborted.

我找到这个解决方案：https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

但我不知道如何在我的代码中使用它来解决问题。

<video muted id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls>
    <source src="/path/to/video.mp4" type="video/mp4">
</video>

let video = document.getElementbyId('video');
let video_cta = document.getElementbyId('video_cta');

//this doesn't fix my problem
var videoPromise = video.play();

if (videoPromise != undefined) {
    videoPromise.then(function(_) {
      video.pause();
      video.currentTime = 0;
  });
}

//start video after click the button
video_cta.addEventListener('click' function() {
    video.play()
})

我将 Ant Design 用于我的 WebApp。对于Card，有一个可悬停的道具，使卡片接缝可点击，但没有 onClick 道具。我如何使它真正可点击？

这是我的代码：

import React, { Component } from 'react';
import { Card, Avatar, Icon, Button, Divider } from 'antd';
import EventDetailsDrawer from '../ui/EventDetailsDrawer';

const { Meta } = Card;

class EventCard extends Component {

render() {
    return (
        <div onClick={alert("Hello from here")}>
            <Card
                hoverable
                cover={<img alt="example" src="https://assetsnffrgf-a.akamaihd.net/assets/m/1102015169/univ/art/1102015169_univ_lsr_lg.jpg" />}
                bodyStyle={{ marginBottom: "-5px" }}
                >
                    <Meta
                        //avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                        avatar={<Button type="primary" shape="circle-outline">{this.props.owner}</Button>}
                        title={this.props.title}
                        description={this.props.descp}
                    />
                    <Divider style={{ marginLeft: "0px" }}></Divider>
                    <p><Icon type="clock-circle" style={{ fontSize: …

我使用 NextJS 和 React 创建了一个网站。我想提供多种语言的网站。为了实现这一目标，我想在文件夹中创建page子文件夹，例如英语/en、德语/de等。

当访问者打开我的网站时，将根据公共 IP 选择正确的子文件夹：

示例：请求来自美国：/pages/en选择文件夹，请求来自德国：/pages/de选择文件夹等。

我怎样才能做到这一点？由于我对 NodeJS 环境的经验很少，请给我具体的例子，非常感谢......

我已经有一个server.js文件了。也许我也可以用这个“是”来实现......

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const request = require('request')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
    .then(() => {
        const server = express()

        //parse application
        server.use(bodyParser.urlencoded({ extended: false }))

        //parse application/json
        server.use(bodyParser.json())

        server.post('/', (req, res) => {
            addEmailToMailChimp(req.body.email, …

在我的 SwiftUI 应用程序中，我想在 ListView 中设计圆形滑动操作，如以下示例所示（天气应用程序 iOS 15）

我知道您可以添加这样的自定义操作：

List {
    Text("Pepperoni pizza")
        .swipeActions {
            Button("Order") {
                print("Awesome!")
            }
            .tint(.green)
        }

    Text("Pepperoni with pineapple")
        .swipeActions {
            Button("Burn") {
                print("Right on!")
            }
            .tint(.red)
        }
}

但我怎样才能使这个滑动动作变圆呢？我知道我可以更改 listRowBackground，但在这种情况下，结果如下所示。那不是我想要的

我是否需要开发自定义 VStack 和 HStack，还是应该将 UITableView 与 UIViewRepresentable 一起使用？在这种情况下，什么是更好的呢？有什么建议么？

我正在使用css-tricks 中的 css calc 函数

calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

我像这样使用 calc 函数

margin-top: calc(270px + (0 - 270) * (100vw - 320px) / (900 - 320));

这margin-right是可行的，我的视口宽度为 320 像素时为 270 像素，视口宽度为 900 像素时为 0 像素。但是当我将窗口大小调整为大于 时900px，结果margin-right为负。

我可以使用媒体查询，但是还有其他 CSS 解决方案吗？我可以将这些计算函数与min() max()或clamp()避免负值结合起来吗？

编辑

我找到了一个可能的解决方案。max()它以这种方式工作

margin-right: max(0vw, calc(270px + (0 - 270) …

我使用 typegoose 和 Nestjs 作为我的后端服务器。我的pages.service.ts文件中已经有一个函数可以通过 ID 获取单个页面，称为getPageById(). 当我尝试从文件中的另一个函数调用此函数时pages.services.ts，我通过打字稿收到以下错误：

Property 'save' does not exist on type 'page'

我的page.model.ts文件看起来像这样

Property 'save' does not exist on type 'page'

我的pages.service.ts文件看起来像这样

import { DocumentType, modelOptions, prop, Severity } from "@typegoose/typegoose";
import { Content } from "./models/content.model";

@modelOptions({
    schemaOptions: {
        timestamps: true,
        toJSON: {
            transform: (doc: DocumentType<Page>, ret) => {
                delete ret.__v;
                ret.id = ret._id;
                delete ret._id;
            }
        }
    },
    options: {
        allowMixed: Severity.ALLOW
    }
}) …

我设置了一个带有纱线工作区的单一存储库。在我的packages文件夹中，我有两个包：icons和website。我尝试在我的网站中导入一些图标，如下所示：

<script>
   import { ArrowUp } from '@app/icons/outline`;
</script>

<ArrowUp class="h-5 w-5" />

它有效，图标将被渲染，但是当我尝试导入它时我没有得到智能感知。生成的outline/index.js文件如下所示：

export { ArrowDown } from "./ArrowDown";
export { ArrowUp } from "./ArrowUp";
export { Dashboard } from "./Dashboard";

该packages/icons/package.json文件如下所示：

{
  "name": "@app/icons",
  "version": "0.0.1",
  "private": "true",
  "scripts": {
    "build": "node ./scripts/build.js"
  },
  "devDependencies": {
    "svg-to-svelte": "^2.2.1"
  }
}

看起来packages/website/package.json像这样：

{
    "name": "@app/website",
    "version": "0.0.1",
    "private": "true",
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build", …

使用NextJS构建一个React-App 要使用css文件，我使用next-css plugin来做到这一点。但是，当我构建我的应用程序时，出现以下错误：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

我的next.config.js文件如下所示：

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: false,
})

我导入并在组件中使用.css文件，如下所示：

import '../style.css'
export default () => <div className="example">Hello World!</div>

我的css文件看起来像这样：

.example {
  color: red;
 }

我的问题在哪里？谁能帮我解决这个问题？

我仔细阅读了中等文章：React Native 0.63 Monorepo 演练，以获取与 react-native 一起使用的纱线工作区。Everhtings 可以工作，我可以构建我的 iOS 和 Android 应用程序，Metro Bundler 也可以工作，但是当我使用yarn workspace mobile ios

RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

除非我在纱线工作区中使用 react-native，否则我不会收到此警告。因此，我怀疑错误是由我的 monorepo 设置产生的。

您知道如何删除此警告吗？

在我的反应应用程序中，我需要在组件之间切换，就像在轮播中一样。我发现这个示例仅使用成帧器运动构建图像轮播：https://codesandbox.io/s/framer-motion-image-gallery-pqvx3 ?file=/src/Example.tsx:1715-1725

我想使其适应组件之间的切换。目前我的页面看起来像这样：

const variants = {
  enter: (direction: number) => {
    return {
      x: direction > 0 ? 100 : -100,
      opacity: 0,
    }
  },
  center: {
    zIndex: 1,
    x: 0,
    opacity: 1,
  },
  exit: (direction: number) => {
    return {
      zIndex: 0,
      x: direction < 0 ? 100 : -100,
      opacity: 0,
    }
  },
}

const Page = () => {

const [[page, direction], setPage] = useState([0, 0])
const paginate = (newDirection: number) => {
  setPage([page + …

我尝试从两个类函数访问变量“ viewControllers”，但我总是在图片上看到错误。

我该如何解决从viewDidLoad（）访问变量以在两个ContainerView之间使用Tabman切换的问题？