小编Jon*_*n_B的帖子

我正在测试 Vue 组件，但在测试按钮的禁用状态时遇到问题。如何在测试中访问按钮的禁用状态？

我尝试过使用，.attributes()但在这种情况下，该方法仅返回未由v-bind. SubmitButton.attributes().disabled总是null。

成分

<button
  id="edit-resource-modal-submit"
  class="btn btn-sm btn-primary modal-button"
  :disabled="loadingResource || !formValid"
  @click="submit"
>
  Save
</button>

测试

describe('Disables buttons if', () => {
  beforeEach(async() => {
    await wrapper.setProps({ isModalOpen: true });
  });
  it('modal is loading', async() => {
    wrapper.vm.loadingResource = true;
    const SubmitButton = wrapper.find('#edit-resource-modal-submit');
    expect(SubmitButton.exists()).toBe(true);
    expect(SubmitButton.attributes().disabled).toBe('true');
  });
});

.attributes() 仅返回

{
  id: 'edit-resource-modal-submit',
  class: 'btn btn-sm btn-primary modal-button'
}

我正在尝试编写一个笔记/整理应用程序，但遇到了一个令人沮丧的错误。

这是我的组件：

import React from 'react';

const Note = (props) => {
  let textarea, noteForm;
  if (props.note) {
    return (
      <div>
        <button onClick={() => {
          props.handleUpdateClick(props.selectedFolderId, props.selectedNoteId, textarea.value);
        }}>
          Update
        </button>
        <textarea
          defaultValue={props.note.body}
          ref={node => {textarea = node;}}
        />
      </div>
    );
  } else {
    return <div></div>;
  }
};

export default Note;

就目前而言，每当我在笔记之间切换并使用来自 note.body 道具的新内容重新渲染笔记组件时，textarea 不会更改并保留上一个笔记的内容。我已经尝试对文本区域使用 value 属性而不是 defaultValue 属性，这确实解决了组件重新呈现时文本区域内容不更改的问题，但是当我这样做时，我不再能够在 textarea 字段中输入更新笔记

有谁知道我可以允许用户在文本字段中键入以更新注释以及在呈现不同注释时更改 textarea 内容的方法吗？

谢谢

我正在关注react-native的课程,我在尝试向页面添加模态组件时遇到了这个错误:

元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.

这是我的代码:

EmployeeEdit.js

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Communications from 'react-native-communications';
import { employeeUpdate, employeeSave, employeeReset } from '../actions';
import { Card, CardSection, Button, Confirm } from './common';
import EmployeeForm from './EmployeeForm';


class EmployeeEdit extends Component {
  constructor(props) {
    super(props);
    this.state = { showModal : false};

    this.onButtonPress = this.onButtonPress.bind(this);
    this.onTextPress = this.onTextPress.bind(this);
  }

  componentWillMount() {
    _.each(this.props.employee, (value, prop) => {
      this.props.employeeUpdate({prop, value});
    });
  }

  componentWillUnmount() { …

我正在努力让 eslint 第一次在我的应用程序中工作。我大部分时间都在工作，但是自从我开始禁用一些规则后，我导入的浏览器控制台和命令行开始被相同的警告弄得乱七八糟。

当我运行 nodemon 时，我的命令行充满了相同的警告。

我也在浏览器控制台中收到类似的消息

我的应用程序按预期运行，linting 也正常运行。我只是想知道是否有办法摆脱这些警告消息

以下是一些可能相关的文件：

包.json

{
    "name": "server",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "engines": {
        "node": "8.4.0",
        "npm": "5.3.0"
    },
    "scripts": {
        "start": "node index.js",
        "server": "nodemon index.js",
        "client": "npm run start --prefix client",
        "dev": "concurrently \"npm run server\" \"npm run client\"",
        "lint": "eslint ."
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "concurrently": "^3.5.0",
        "cookie-session": "^1.3.1",
        "express": "^4.15.4",
        "mongoose": "^4.11.10",
        "nodemon": "^1.12.0",
        "passport": "^0.4.0",
        "passport-google-oauth20": "^1.0.0"
    },
    "devDependencies": {
        "eslint": "^4.9.0",
        "eslint-config-airbnb": "^16.1.0", …

我正在尝试div使用 React 钩子创建此旋转示例的副本。https://codesandbox.io/s/XDjY28XoV

到目前为止，这是我的代码

import React, { useState, useEffect, useCallback } from 'react';

const App = () => {
  const [box, setBox] = useState(null);

  const [isActive, setIsActive] = useState(false);
  const [angle, setAngle] = useState(0);
  const [startAngle, setStartAngle] = useState(0);
  const [currentAngle, setCurrentAngle] = useState(0);
  const [boxCenterPoint, setBoxCenterPoint] = useState({});

  const setBoxCallback = useCallback(node => {
    if (node !== null) {
      setBox(node)
    }
  }, [])

  // to avoid unwanted behaviour, deselect all text
  const deselectAll = () => …

我已经使用简单的 MobX 商店构建了一个基本的计数器 React 应用程序。我能够使用创建可观察的 MobX 状态，makeObservable但由于某种原因，当我尝试使用时makeAutoObservable出现错误

Cannot read property 'counter' of undefined

我怎么使用makeAutoObservable不正确？

店铺

import { makeAutoObservable, makeObservable, action, observable } from "mobx";

class SampleStore {
  counter = 0;

  constructor(arg) {
    makeAutoObservable(this);
    // makeObservable(this, {
    //   counter: observable,
    //   increment: action.bound,
    //   decrement: action.bound,
    // });
  }

  increment() {
    this.counter++;
    return this.counter;
  }

  decrement() {
    this.counter--;
    return this.counter;
  }
}

export default SampleStore;

useStore 钩子

import { createContext, useContext } from "react";

import …

我直接从他们的网站https://foundation.zurb.com/sites/docs/top-bar.html复制了基础导航栏语法，下拉菜单功能似乎不起作用

这是代码：

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

这是它的样子

我想向我的应用添加链接以打开手机的本机摄像头应用吗？这可能吗？

我知道react-native-camera存在，但是从文档看来，它仅支持访问相机，目的是在应用程序内部创建自己的相机界面。我宁愿只使用手机上已有的相机应用程序。

谢谢

我正在尝试在由本机反应的WebView加载的网页中设置一个全局变量.我正在尝试使用injectJavascript prop设置全局变量,但是我收到一个错误,告诉我injectJavascript应该是一个函数.

如何格式化injectJavaScript函数以将消息作为全局变量传递到加载的网页？谢谢.

class Browser extends React.Component {

  render() {
    const { url } = this.props;
    return (
      <View>
        <WebView
          source={{ uri: url }}
          injectJavaScript={
            "window.testMessage = 'hello world'"
          }
        />
      </View>
    );
  }
}

我刚刚安装了软件包 live-server 使用 npm install -g live server

我检查了一下，该软件包当前安装在

/Users/username/.npm-global/lib/node_modules/live-server/live-server.js

但是，当我尝试从命令行运行 live-server 时出现错误

zsh: command not found: live-server

我需要做什么才能运行实时服务器？我安装了 oh-my-zsh，我担心这可能会导致我的问题。我知道它应该与设置我的路径有关，但我不确定是什么。

运行echo $PATH结果：

/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/opt/ImageMagick/bin:/Users/username/npm-global/bin:/Users/username/npm-global/bin:/Users/username/npm-global/lib

以下是我的根目录中可能相关的一些文件。

谢谢

.zshrc

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH=/Users/username/.oh-my-zsh

# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
# …

我正在尝试在我正在构建的移动应用程序中设置通用链接。我试图在我的网站上匹配的路径是www.mywebsite.com/route?query=xxx

苹果文档有一个示例apple-app-site-association文件，如下所示。

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "9JA89QQLNQ.com.apple.wwdc",
                "paths": [ "/wwdc/news/", "/videos/wwdc/2015/*"]
            },
            {
                "appID": "ABCD1234.com.apple.wwdc",
                "paths": [ "*" ]
            }
        ]
    }
}

但此示例没有带有查询字符串的路径示例。

如何www.mywebsite.com/route?query=xxx在 apple-app-site-association 文件中匹配我的路线？

谢谢