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, 覆盖才会生效

谢邀...首先撇开 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 }))
    }
}

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

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
        }
    })
}

package.json

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

已解决, 父组件少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;

旧版本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)
    }
}

浏览器访问子组件路由/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',
      },
     ]
  }

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

server: {
    open: true,
    autoOpenBrowser: true
}

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

posman结果, 能download下来

页面访问结果

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