小编vbo*_*tio的帖子

我正在使用React Context api将某些状态传递给不同的子组件，并且它正在返回undefined。

父组件：

export const UserContext = React.createContext();
export class Provider extends Component {
  state = {
    editGroup: false,
  }
  render() {
    return (
      <UserContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </UserContext.Provider>
    )
  }
}

子组件：

import { UserContext } from './index';

return (
  <React.Fragment>
    <UserContext.Consumer>
      {(context) => (
        <p>im inside the consumer {console.log(context)}</p>
      )}
    </UserContext.Consumer>
  </React.Fragment>
);

最后console.log的返回是undefined，我在这里做错了什么？

我正在为用 React 构建的库构建我的故事书文档，但我没有找到一种简单的方法来在同一页面中呈现多个变体。

所以，到目前为止我所拥有的是这样的

const Template = (args, { argTypes }) => <Title {...args} />

export const Primary = Template.bind({});
export const Success = Template.bind({});
export const Warning = Template.bind({});
export const Inverse = Template.bind({});
export const Default = Template.bind({});
export const Info = Template.bind({});
export const Danger = Template.bind({});
export const Disabled = Template.bind({});

Primary.args = {
  children: 'Primary',
  level: 3, // <- this can go from 1 to 5,
  as: 'h1', 
  variant: 'primary',
}

Success.args = {
  children: …

我正在制作一个响应式背景视频。我有这个代码。

<video id="bgvideo" />

function scaleVideo() {

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
    var videoNativeHeight = $('video#bgvideo')[0].videoHeight;


    var heightScaleFactor = windowHeight / videoNativeHeight;
    var widthScaleFactor = windowWidth / videoNativeWidth;


    if (widthScaleFactor >= heightScaleFactor) {
        var scale = widthScaleFactor;
    } else {
        var scale = heightScaleFactor;
    }

    var scaledVideoHeight = videoNativeHeight * scale;
    var scaledVideoWidth  = videoNativeWidth * scale;

    $('video#bgvideo').height(scaledVideoHeight);
    $('video#bgvideo').width(scaledVideoWidth);
}

我正在使用 grunt 来编译我的代码等。grunt 的 Jshint 说我使用的“scale”超出了范围，我无法理解为什么。

有什么建议吗？

我正在尝试生成我的发布apk以在Play商店中部署它.我正在运行这个命令

Sudo cordova build android --release

这为我生成了一个名为Android-Release-Unsigned.apk的文件

我尝试了很多解决方案,比如创建密钥库

keytool -genkey -v -keystore key-name.keystore -alias alias-name -keyalg RSA -keysize 2048 -validity 10000

或者像这里一样创建Ant.properties文件的技巧,但根本没有任何工作.

还有其他可能的解决方案吗？Cordova版本是5.1.1

我的应用程序是用Cordova(5.5.1)构建的,我试图通过WhatsApp分享Url的.我正在使用以下协议:whatsapp://send?text= test

如果我在移动浏览器上打开我的网站就可以了.在iOS上,它也可以正常运行.

我试图将它添加<access origin="whatsapp:*" launch-external="yes" />到我的config.xml但它仍然无法正常工作.

我正在使用InAppBrowser,这就是我打开webview的方式

var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no", "toolbar=no", "closebuttoncaption=a", "EnableViewPortScale=no");

这是错误:

不知道怎么解决这个问题？

我实现了一个 React-Recaptcha 组件，我试图向它添加一些单元测试。

除其他外，我试图测试我的组件的状态是否已更改（这应该是选中该框后收到的令牌）。

<ReCAPTCHA sitekey={RECAPTCHA_SITE_KEY} onChange={value => this.setState({ gToken: value, recaptchaState: true })} />

我的测试有这样的东西

describe('RefundaModal Component', () => {
  const modalcomponent = shallow(<RefundModalDialog />);
  const captcha = shallow(<ReCAPTCHA sitekey={RECAPTCHA_SITE_KEY} onChange={() => {}} />);
  test('render RefundModalDialog component', () => {
    expect(modalcomponent.exists()).toBe(true);
  });
  test('user clicked on recaptcha', async () =>
    modalcomponent.setState({ gToken: null, recaptchaState: false });
    captcha.props().onChange();
    expect(modalcomponent.state().recaptchaState).toEqual(true);
  });
});

我也尝试了一种不同的方法，captcha.simulate('change');但是当我想要接收 true 时，我一直收到 false。

实施此类测试的正确方法是什么？

谢谢

我正在为我的应用程序编写第一个测试，然后安装 Jest。

我的测试非常简单，所以我不认为我得到的错误来自那里。

import React from 'react';
import renderer from 'react-test-renderer';
import FancyInput from './FancyInput';

describe('FancyInput', () => {
  it('should render correctly', () => {
    expect(
      renderer.create(
        <FancyInput />
      )
    ).toMatchSnapshot();
  });
});

运行测试时Support for the experimental syntax 'jsx' isn't currently enabled 也出错

`Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.`

我的 webpack 文件有以下内容：

rules: [ …

我正在尝试使用AJAX提交一个简单的表单.我正在使用grunt作为任务运行器来编译我的JS文件等等.

这是我到现在为止所做的.

$("form").submit(function(event) {
    event.preventDefault();

    var formData = {
        $("#username").val(),
        $("#password").val()
    };

    $.ajax({
        url: 'xxx',
        type: 'POST',
        dataType: 'json',
        data: formData,
        encode: true
    })
    .done(function(data) {
        console.log(data);

    })
});

我的疑问是关于任务即将运行时的JShint错误

$("#username").val(),^'简明方法'在ES6(使用esnext选项)或Mozilla JS扩展(使用moz)中可用.

这是我的gruntfile(jshint任务)

jshint: {
        ignore_warning: {
            options: {
                '-W099': true,
                /*'-W041': true,*/
                '-W044': true,
                '-W033': true,
                '-W043': true,
                '-W049': true,
                '-W004': true,
                '-W065': true,
                '-W083': true, // Corrigir futuramente
            },  
            src: ['public/_assets/src/js/modules/*.js'],
        }
    }

这究竟意味着什么？我该如何解决这个错误？

谢谢!

我正在将 div 转换为可下载的图像。

function generateBanner() {
    domtoimage.toBlob(document.getElementById('wrapper'))
    .then(function(blob) {
      console.log("blob", blob)
      window.saveAs(blob, 'my-node.png');
    });
}

这段代码工作正常。我的问题是当这个 div 具有托管在 S3 存储桶中的图像时

例如：

<article id="wrapper">
    <p>{{ title }}</p>
    <img class="logo" src="{{ logo }}" alt="">
    <aside class="exclusive" ng-if="exclusive"></aside>
    <aside class="off" ng-if="percentoff">{{ percentoff }}
    </aside>
    <div class="produtos">
        <img src="https://s3-sa-east-1.amazonaws.com/teste-img-roge/Thumbs/0026954_30510_1_415.jpeg" alt="">
    </div>
    <aside class="valid" ng-if="valid"></aside>
    </article>

之后，当我单击时，出现 CORS 错误，但我不知道为什么。

在我的 s3 配置中，我有这个：

<CORSConfiguration>
   <CORSRule>
 <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>

仍然是同样的错误。任何想法 ？我在 s3 中尝试了几种不同的配置，也尝试了几种使用 javascript 的方法，但都不起作用。

我最近创建了一个别名路径来导入我的组件，这样我就可以避免像这样导入组件../../../../componentFolder，而是这样做@src/componentFolder。\n我的问题是我的单元测试停止工作，因为它找不到导入组件的路径。\n我的文件结构如下。

webpack.config.js\ntsconfig.json\nclient\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jest.config.js\n|   tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 test\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView.spec.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent.spec.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

我的webpack.config.js是这样的

module.exports = {\n\nresolve: {\n    extensions: ['.mjs', '.js', '.ts', '.tsx', '.scss'],\n    alias: {\n        '@src': path.resolve(__dirname, './client/src/'),\n        '@components': path.resolve(__dirname, './client/src/components/'),\n    }\n}, ...etc\n

我的tsconfig.json我添加了 2 个paths。

"compilerOptions": {\n    "jsx": "react",\n    "sourceMap": true,\n    "moduleResolution": "node",\n    "baseUrl": "client",\n    "paths": {\n        "@src/*": …