小编azi*_*ium的帖子

在桌面上,iPad背景中的图像保持其元素的宽高比background-size: cover,但在我的Android手机(chrome)上,图像看起来更像是width:100%;height:100%,

你可以在这里看到它.

这是我手机的截图

// Markup
<div class="wrapper">
  <div class="content">
...

// Style
html, body {
  height: 100%
}

.wrapper {
  position: relative;
  height: 100%;
  background-image: url(...);
  background-size: cover;
  ..vendor prefixes..
}

我正在尝试创建基于 Json 服务器包的小应用程序，这将帮助我记住我有空时想看的电影，想学习 React 和 Axios，所以我正在使用这些技术做这件事，想法是当我点击添加电影按钮 - 电影将被添加到 Json 数据库，点击删除 - 特定电影将被删除，点击列表时 - 我将能够编辑文本，

如果我执行诸如http://localhost:3000/movies/1 之类的操作，Delete 就可以工作，以显示它应该删除的 id，但是有没有办法设置它？要删除连接到我单击的按钮的列表？类似于http://localhost:3000/movies/ “id”？我将不胜感激任何帮助，因为我完全不知道如何继续

import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import List from "./list.jsx";

class Form extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name:'',
            type:'',
            description:'',
            id:'',
            movies: [],

        }
    }

    handleChangeOne = e => {
        this.setState({
            name:e.target.value
        })
    }
    handleChangeTwo = e => {
        this.setState({
            type:e.target.value
        })
    }
    handleChangeThree = e => { …

在一个相当麻烦的情况下我有一个对象数组

[
   {
     "title":"placeholder",
     "text":"placeholder"
   },
   {
     "title":"test",
     "text":"placeholder"
   },
   {
     "title":"javascript",
     "text":"placeholder"
   }
]

我在一个 div 中显示它们，但这并不重要我有一个输入字段，用户应该输入标题，并且当他们输入数组时，应该只显示匹配的对象。输入 java 会显示 javascript 标题对象

我需要以某种方式更改数组，以便除了输入的标题外不显示任何内容，如果输入为空则显示整个数组

我正在使用 React 但我只能使用钩子所以我复制了 json

var [arrayOfObjects, setArray] = useState(Json)

Json 是从本地文件中导入的 arrayOfNotes 是我需要更改的数组，指出它更容易理解

提前ty

超级难过这个.我有一些服务器代码由于某种原因在我的测试中抛出UTF-8错误但在正常运行服务器时工作正常:

码:

export default ({ projectId = PROJECT_ID, esHost = ES_HOST } = {}) => {
  let app = express();
  app.use(cors());
  app.use(bodyParser.json({ limit: '50mb' }));

  let http = Server(app);
  let io = socketIO(http);

  let server = {
    app,
    io,
    http,
    status: 'off',
    listen(
      port = PORT,
      cb = () => {
        rainbow(`?? Listening on port ${port} ??`);
      },
    ) {
      this.http.listen(port, () => {
        main({ io, app, projectId, esHost, port });
        this.status = 'on';
        cb();
      });
    },
    close(cb = () …

我有一个名为currentPlayer的服务器变量,它在emit'init'调用中正确绑定,但不会在我的broadcast.emit中绑定.从客户端传递的变量turnNumber首先正确更新.当触发pass事件时,我可以看到终端中的currentPlayer切换值,但我很难过为什么它不在视图中更新.

我以前在绑定到原始类型时遇到了一些麻烦,所以我尝试了额外的步骤并将currentPlayer分配给一个对象数组:$ scope.globalVars = [{currentPlayer:data.currentPlayer}],但这没有帮助.

//server
var currentPlayer = 1;
socket.emit('init', {
    currentPlayer: currentPlayer
});
socket.on('pass', function (data) {
    currentPlayer = currentPlayer == 1 ? 2 : 1;
    console.log(currentPlayer);
    socket.broadcast.emit('pass', {
        number: data.turnNumber,
        currentPlayer: currentPlayer
    });
});

//client
socket.on('init', function (data) {
    $scope.globalVar.currentPlayer = data.currentPlayer;
});
socket.on('pass', function (data) {
    $scope.globalVar.turnNumber = data.number;
    $scope.globalVar.currentPlayer = data.currentPlayer;
});
//click event
$scope.globalVar.turnNumber++;
socket.emit('pass', {
    turnNumber: $scope.globalVar.turnNumber
});

<!-- html -->
{{globalVar.currentPlayer}} {{globalVar.turnNumber}}

更新:

我意识到我可以在角度控制器中处理当前的转向逻辑.我不再更改服务器上的变量并尝试将其传递回客户端.也许正如Chandermani所说,它只是出于棱角分明的背景.

//server
socket.on('pass', function (data) {
    socket.broadcast.emit('pass', {
        number: …

我有一个非常简单的指令,应该改变它的宽度以响应$window.onresize事件.由于某种原因,只有ng-repeat数组中的最后一个元素/指令响应并相应地更改其css.

<!-- html -->
<tile class="tile" ng-repeat="tile in tiles"></tile>

// js
function main ($scope) {
  $scope.tiles = []
  for (let i = 0; i < 6; i++) {
    $scope.tiles.push({ active: false })
  }
}

function tile ($window) {
  return {
    link: (scope, el, attr) => {
      let $main = document.querySelector('.right')      

      el.css({
        display: `inline-block`,
        padding: `1rem`,
        border: `1px solid #ccc`,
        width: `${$main.clientWidth / 3}px`
      })

      $window.onresize = () => {
        console.log($main.clientWidth)
        scope.$apply(() => {
          el.css({
            width: …

有许多关于反应状态更新涉及数组的帖子,但它们似乎都没有解决我的情况.

我正在使用FullCalendar.io组件,它接受一组事件作为父组件的prop,并填充日历单元格.我尝试基于nextProps.cal_events设置state'cal_events_state',但由于某种原因,cal_event_state设置为[](显然初始状态值被覆盖).

我错过了什么？

import React from 'react';
import ReactDOM from 'react-dom';
var $ = require ('jquery')

var Calendar = React.createClass ({
  render: function() {
    return <div id="calendar"></div>;
  },

  getInitialState: function() {
      return {
        cal_events_state: [{"due": "201505", "title": "Production"}]
        , test_state: 11
      }
  },

componentDidMount: function() {
var self = this;
const var_cal_events = this.props.cal_events; //This prop is blank at this point because ajax hasn't returned an array yet.
$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: …

我在这里描述了这个确切的问题https://github.com/reduxjs/redux-toolkit/issues/485#issuecomment-610654378

所以我直接导入了 ThunkDispatch 并使用它。我无法从调度的响应中获取任何密钥而不引发property does not exist错误

@reduxjs/toolkit@1.5.1 

const response = await dispatch(deactivateSubscription(args))

const response: PayloadAction<ApiResponse<EmptyBodyResponse>, string, {
    arg: DeactivateSubscriptionArgs;
    requestId: string;
    requestStatus: "fulfilled";
}, never> | PayloadAction<...>

export interface ApiResponse<T = unknown> {
  body: T
  error: Error
  success: boolean
  message?: string
}

TS2339: Property 'error' does not exist on type 'PayloadAction<ApiResponse<EmptyBodyResponse>, string, { arg: DeactivateSubscriptionArgs; requestId: string; requestStatus: "fulfilled"; }, never> | PayloadAction<...>'.
  Property 'error' does not exist on type 'PayloadAction<ApiResponse<EmptyBodyResponse>, string, { arg: DeactivateSubscriptionArgs; requestId: …