小编Neg*_*iri的帖子

我在Android Studio for Windows中使用模拟器编写React-native.我不知道如何调试我的代码？

我怎样才能在代码中使用console.log并查看结果？我该如何检查元素？我怎样才能在代码中加点断点？

对工具/教程的任何建议都将是一个很大的帮助.

谢谢Negin

我正在使用react-slick，并且我有自己的自定义箭头。该滑块不是无限循环，我想隐藏循环开始和结束处的箭头。所以基本上在开始时 PrevArrow 应该被隐藏，最后 NextArrow 应该被隐藏。我试图根据状态变化设置隐藏类名称。然而，尽管状态正在正确更改，但类名并未更改。你知道这段代码有什么问题吗？以及如何让它发挥作用？

下面是我对 Slider 和渲染 Slider 的组件的设置。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider from 'react-slick';
import Arrow from '../slider/Arrow';


export default class CityCarousel extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayLeftArrow: true,
            displayRightArrow: true
        };


        this.slidesToShow = 5;
        this.sliderSetting = {
            dots: false,
            arrows: true,
            infinite: false,
            initialSlide: 0,
            slidesToShow: this.slidesToShow,
            slidesToScroll: 1,
            speed: 500,
            rows: 0,
            nextArrow: <Arrow
                    styleClassName={`city-carousel__right ${
                        this.state.displayRightArrow ? '' : 'city-carousel__right--hide'
                    }`}
                    direction="right" …

我创建了一个jsx文件，如下所示

  /** @jsx dom */
(function(){
'use strict';

define([
        'jquery',
        'react',
        'react-dom'
    ],

    function($, React, ReactDOM){

        var AppView = React.createClass({
            render: function() {
                return <div>Hello World</div>;
            }
        });

        ReactDOM.render(<AppView />, document.getElementById('dsl-application'));

    });
})();

并使用以下命令将jsx转换为js

babel --watch src --out-dir bundle --preset react

和输出文件如下

(function () {
'use strict';

define(['jquery', 'react', 'react-dom'], function ($, React, ReactDOM) {

    var AppView = React.createClass({
        displayName: 'AppView',

        render: function () {
            return dom(
                'div',
                null,
                'Hello World'
            );
        }
    });


    ReactDOM.render(dom(AppView, null), document.getElementById('dsl-application'));
});
})();

问题是我遇到了Uncaught …

我想使用树摇动功能似乎我们不需要安装babel-preset-es2015-webpack.对于es2015预设,我们仍然可以使用babel-preset-es2015并将modules标志设置为false.我更改了我的webpack配置,如下所示,这导致我的react组件中的导入行出现"意外的令牌导入"错误.

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: [['es2015', {modules: false}], 'react']
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
      }
    ]
  }

我还尝试将预设设置为['es2015','react',{modules:false}]然后我在控制台上出现了不同的错误
模块构建失败:ReferenceError:[BABEL] C:\ FE-Proj-Templates\webpack\main.js:使用删除的Babel 5选项:foreign.modules - 在plugins选项中使用相应的模块转换插件.查看http://babeljs.io/docs/plugins/#modules

如何设置模块标志为false的预设es2015并使用React预设？

我需要一条带有圆角边缘的垂直线。我使用了 border-left 但 border-radius 不适用于圆角边缘。

如何更改 IconButton 中图标的颜色？主题中的图标颜色（使用主题设计器）是黑色的，但有时我需要以白色显示图标按钮。下面的代码似乎没有将图标的颜色更改为白色

const iconStyle = {
    root: {
        color: theme.palette.white
    }
};

return (
    <div>
        <div className={css(styles.close)}>
            <IconButton iconProps={{ iconName: 'Close' }} styles={iconStyle} title="Close" ariaLabel="Close" />
        </div>

        <h4>{title}</h4>
        <p>{narrative}</p>
        {link}
    </div>
);

我从顶部组件传递了一个状态标志。如果该标志为真，则应设置自定义有效性，否则应清除自定义有效性。我收到此错误：

Unknown prop `setCustomValidity` on <input> tag. Remove this prop from the element. 

然而问题是 setCustomValidity 尚未被 React 识别。

import React from "react";
import BaseField from "./BaseField";
import PropTypes from "prop-types";

const InputField = props => {
const { name, type, isMandatory, onChange, pattern, misMatchEmail } = props;

return (
    <BaseField {...props}>
    <input
        name={name}
        pattern={pattern}
        type={type}
        onChange={onChange}
        setCustomValidity={`${misMatchEmail} ? 'Confirm email does not match' : ''`}
        onSelect={e => e.preventDefault()}
        onCopy={e => e.preventDefault()}
        onPaste={e => e.preventDefault()}
        onCut={e => e.preventDefault()}
        required={isMandatory}
    />
    </BaseField> …

我有一个字符串数组，我想将其转换为对象数组。

array = ['a', 'b', 'c'];

我想生成

array= [
  {'name': 'a', 'isChecked': false, 'availibility': 0 },
  {'name': 'b', 'isChecked': false, 'availibility': 0 },
  {'name': 'b', 'isChecked': false, 'availibility': 0 }
];

我在下面尝试过，仍然返回原始数组！

array.map((name) => ({
  name,
  isChecked: false,
  availability: 0
}));

你会怎么做？

这是我在 package.json 中的脚本。我使用 create-react-app 创建了一个项目，并想引入 tailwind。

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css",
"build": "npm run build:css && react-scripts build",
"start": "npm run watch:css && react-scripts start",

当我运行yarn start 时，应用程序未启动。看来是停在值班时间了。我怎样才能拥有顺风手表并启动应用程序？