x1ngoo

x1ngoo 查看完整档案

东莞编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

x1ngoo 提出了问题 · 1月14日

解决H5页面如何隐藏video 原本的 control

html
<video
  ref="myVideo"
  webkit-playsinline
  playsinline
  :data-original="videoUrl"
  :poster="poster"
  style="width: 100%; height: 100%"
>
</video>

js
this.$ref.myVideo.controls = false


css
video::-webkit-media-controls-panel {
  display:none !important;
}

以上, 手机端video 还是会显示 controls, 该如何才会隐藏?
还有就是如何让div中的内容覆盖显示在video上, 例如弹幕网的弹幕, 一些图标之类的. 设置absolute z-index是无效的,
所以猜想是否要先隐藏了原本的control, 覆盖才会生效

关注 5 回答 3

x1ngoo 赞了回答 · 1月14日

解决react项目, 在页面修改saga models文件的拿到的state, 为什么会直接更新了

谢邀...首先撇开 react 和 redux 的概念,看最基础的 js 代码:

var obj = {};
var obj1 = obj;

obj1.name = 'test';
console.log(obj);

上面的代码执行后会发现,明明没有修改 obj 但为啥 obj 也会改变呢?答案是在 js 中对象、数组这种类型是引用类型,你单纯的赋值对象其实给的是同一份引用。

因此在该函数中所修改的对象都是同一份的:

const handle = () => {
    const { myModel: { data } } = this.props;
    
    // 在此处已经被修改了 
    // 这是具有副作用的操作
    data.list.forEach(item => item.disabled = true };
}

回到 React 的概念,react 提倡纯函数,因此你在修改时可以新建对象来代替直接修改:

const handle = () => {
    const { myModel: { data } } = this.props;
    
    // 完全新建
    const newData = {
        ...data,
        list: data.list.map(item => ({ ...item, disabled: true }))
    }
}

这样就不会有依赖之外的情况出现了。

关注 2 回答 1

x1ngoo 关注了用户 · 1月14日

newsning @newsning

9yin

关注 61

x1ngoo 提出了问题 · 2020-12-18

解决react项目, 在页面修改saga models文件的拿到的state, 为什么会直接更新了

models.js

export default {
    namespace: 'myModel',
    state: {
        data: {
          list: [
              { i: 1, disabled: false},
              { i: 2, disabled: false},
              { i: 3, disabled: false},
          ],
          keys: '',
    },
},
effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(getData, payload);
      yield put({
        type: 'update',
        payload: response,
      });
    },
},
  reducers: {
    saveState(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  }
};

A页面

// 方法
const handle = () => {
    const { myModel: { data } } = this.props;
    data.list.forEach(item => item.disabled = true };
    
    // 为什么我没执行下面的代码 这个在model 里的 data 也会更新了
    // dispatch({
        // type: 'myModel/saveState',
        // payload: {
            // data
        // }
    // })
}

B页面

 render() {
    const { myModel: { data } } = this.props;
    // A页面执行了handle方法后 为什么这里的data也会更新了
    console.log(data);
 }



分割线
或者说我上面操作是错的? 应该先把数据放到A页面的state, 不能直接修改props

A页面

constuctor() {
    super();
    this.state = {
        myData: props.myModel.data
    }
}
// 方法
const handle = () => {
    const { myData } = this.state;
    myData.list.forEach(item => item.disabled = true };
    
    dispatch({
        type: 'myModel/saveState',
        payload: {
            data: myData
        }
    })
}

关注 2 回答 1

x1ngoo 回答了问题 · 2020-10-21

解决nuxt 项目如何配置项目启动后自动在浏览器打开

package.json

"scripts": {
    "dev": "nuxt --open"
}

关注 1 回答 1

x1ngoo 回答了问题 · 2020-10-21

解决react 嵌套路由中, 在父组件中给children添加参数, 子组件为什么接收不到

已解决, 父组件少clone了一次.
parent.js

const Parent = props => {
  const { children } = props;
  
  // 1. 遍历children内层的组件 -> children.props.children , 克隆每个组件并添加上新的属性, 返回新的children.props.children
  const deepChildrenWithProps = React.Children.map(children.props.children, child => React.cloneElement(child, { a: 1 }));

  // 2. 用新的children.props.children 覆盖 chilren 里现有的 children.props.children
  const childrenWithProps = React.cloneElement(children, { children: deepChildrenWithProps });

  return (
      <div>
        {childrenWithProps}
      </div>
  );
};

export default Parent;

关注 2 回答 2

x1ngoo 提出了问题 · 2020-10-21

使用getDerivedStateFromProps后, 以前的方法逻辑该在哪里调用?

旧版本react使用componentWillReceiveProps时的写法

componentWillReceiveProps(nextProps) {
    const { id } = this.props;
    const { id: newId } = nextProps;
    if (newId !== id) {
      // 处理逻辑
      this.handleGet(newId)
    }
  }

新版本react 使用 getDerivedStateFromProps 后里面的逻辑代码该怎么写? 我这样写合适吗?

state = {
  id: ''
}

static getDerivedStateFromProps(nextProps, preState) {
    const { dispatch, id: newId } = nextProps;
    const { id } = preState;
    if (newId && newId !== id) {
      return {
        id: newId
      };
    }
    return null;
}

componentDidUpdate(_, prevState) {
    const { id } = this.state;
    if (id && id !== prevState.id) {
      this.handleGet(id)
    }
}

关注 1 回答 0

x1ngoo 提出了问题 · 2020-09-08

解决react 嵌套路由中, 在父组件中给children添加参数, 子组件为什么接收不到

浏览器访问子组件路由/parent/child, 子组件为什么接收不到参数

父组件A
路由 /parent
parent.js

const Parent = props => {
  const { children } = props;
  const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { a: 123 })

  console.log('childrenWithProps', childrenWithProps)
  // 在这里输出 childrenWithProps 中是有参数a的

  return (
      <div>
        {childrenWithProps}
      </div>
  );
};

export default Parent;

子组件B
路由 /parent/child
child.js

import React from 'react';

const Child = (props) => {

  console.log('Child', props, props.a)
  // 这里输出props, 为什么props 里会没有属性a?

  return (
    <div>child</div>
  )
}

export default Child;

路由文件
router.js

 {
    path: '/parent',
    component: './Parent',
    routes: [
      {
        path: '/parent/child',
        component: './Parent/Child',
      },
     ]
  }

关注 2 回答 2

x1ngoo 提出了问题 · 2020-03-11

解决nuxt 项目如何配置项目启动后自动在浏览器打开

nuxt 项目如何配置项目启动后自动在浏览器打开
尝试在nuxt.config.js 里加这个, 结果无效

server: {
    open: true,
    autoOpenBrowser: true
}

关注 1 回答 1

x1ngoo 提出了问题 · 2019-11-01

为什么我的导出接口用http可以导出, 但是用https却跳到403无权限页面 这个是和什么有关?

我是项目是用的react antd的
问个问题, 为什么我的导出接口在http页面可以导出, 但是在https页面却没下载操作,然后只能跳到403无权限页面,
用postman试了是有文件返回的,
image
posman结果, 能download下来


页面访问结果
image
image

这个是被拦截了吗, 请问是和什么有关?

关注 2 回答 1

认证与成就

  • 获得 13 次点赞
  • 获得 65 枚徽章 获得 0 枚金徽章, 获得 17 枚银徽章, 获得 48 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-24
个人主页被 919 人浏览