小编Jim*_*mmy的帖子

请查看下面的代码段。我试图呈现一个闪烁的文本，当它不出现时，留一个空白。但是，React似乎只是一起删除了所有元素。如何在React中正确渲染空白空间？试图进行各种跨度的搜索和测试，但仍无所获。谢谢。

class Blinker extends React.Component {
    constructor(props) {
    super();
    this.state = {
      appear: true
    }
    this.blinker = this.blinker.bind(this);
  }

  blinker()  {
    this.setState({appear: !this.state.appear });
  }

  componentDidMount() {
    setInterval(this.blinker, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.blinker);
  }

  render() {
    const name = "testing";
    const underScore = "_";
    const com = "com";
    return (
      <div>
        <div id="test"> { name } </div>
        <div id="test">
          { (this.state.appear) ? underScore : ' '}
        </div>
        <div id="test"> { com } </div>
      </div>
    );
  }
}



ReactDOM.render(<Blinker />, app); …

我正试图用我们的redux动作实现开玩笑.鉴于以下操作foo并且它正在进行以下测试,以下测试失败,因为store.getActions()它只是按照我[{"type": "ACTION_ONE"}]的意愿返回[{"type": "ACTION_ONE"}, {"type": "ACTION_TWO"}].如何在测试时获得两个调度操作？谢谢!

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

export const foo = () => {
  return (dispatch) => {
    dispatch(actionOne());
    return HttpService.get(`api/sampleUrl`)
      .then(json => dispatch(actionTwo(json.data)))
      .catch(error => handleError(error));
  };
};

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

beforeEach(() => {
  store = mockStore({});
});

describe('sample test', () => {
  test('validates foo complex action', () => {
    const expectedActions = [
      {type: actionTypes.ACTION_ONE},
      {type: actionTypes.ACTION_TWO},
    ];

    return store.dispatch(actions.foo())
      .then(() …

我有一个使用axios的ajax请求的应用程序。当用户遇到网络问题（例如，他们的wifi熄灭并且在我的应用程序上不再有互联网连接）时，我要确保仅发出第一个axios请求，并且如果我检测到有一个网络问题，不要再尝试任何其他请求，而要重试相同的请求，直到成功为止。

我的应用程序执行了许多请求，包括每2.5秒发出一个请求（在本示例中为getData）。当应用程序初始化时（它twilio()在初始化时执行），它还会建立Twilio连接。

连接断开时，将发生以下情况：

1. getData 失败，导致控制台消息 this is a network error.

2. TwilioDevice.offline被执行。这将导致两条错误消息：尝试this is a network error.时会显示一条消息（错误消息2），失败后则会显示一条消息（错误消息3）。TwilioDevice.offlinefetchToken()received an error.fetchToken()

给定＃的1和2，我如何确保：

• 如果我遇到网络错误，我只会收到一条错误消息，而不是3条消息，即“存在网络错误”
• 我的应用程序检测到存在网络错误，然后尝试重新建立连接，然后，如果成功，则恢复获取数据，Twilio令牌等。

谢谢！代码如下。

示例代码：

const getData = async () => {
  try {
    const response = await axios.get('api/data');
    return response.data;
  } catch (error) {
    handleError(error);
  }
};

const fetchToken = async () => {
  try {
    const data = await axios.get('api/twilio-token');
    return data.token;
  } catch (error) {
    return handleError(error);
  }
}; …

我正在尝试创建一个函数，其参数可以是两种类型之一。然后该函数可以调用另一个函数。但是，我收到一条错误消息。您可以在下面看到脚本和屏幕截图。如何编写此函数以便它可以接受具有两种类型之一的参数？谢谢！

interface A {
  a: string;
  title: string,
}

interface B {
  b: number;
  title: string;
}

const alpha = (data: A) => data.a;

const beta = (data: B) => data.b;

const foo = (data: A | B) => {
  if (data.title === 'a') {
    return alpha(data);  // Message: "Argument type A | B is not assignable to type A"
  }
  if (data.title === 'b') {
    return beta(data);  // Message: "Argument type A | B is not assignable to type …

我已经在我的反应应用程序的资产文件夹中放置了一个 csv 文件，但是，该文件没有被提取并通过 webpack 添加到我的 dist 构建中（图像仍然作为资产添加到构建中，但 csv 文件不是） . 你可以在下面看到我的 webpack 构建。那么如何通过 webpack 将一个 csv 文件添加到我的 dist 构建中（目标是让我的应用程序的用户能够下载这个文件）？谢谢！

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

const config = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        secure: false,
      },
    },
    allowedHosts: [
      'localhost',
      'fatpandadev'
    ],
    public: 'fatpandadev:8080'
  },
});

module.exports = config;

webpack.common.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const DIST_DIR = path.resolve(__dirname, …

我想使用 react-svg-loader 来导入和使用我的应用程序的一些 svg 资产。你可以在下面找到我的 webpack 配置。然而，问题是我还使用了一些文件加载​​器来处理 svg 文件。这些是必需的，因为我的应用程序的一部分是从字体真棒导入图标，例如<i className="fa fa-lock" aria-hidden="true" />。所以我可以通过停止让我的文件加载器查找 svg 文件来让 react-svg-loader 工作，但是我的应用程序上的很多图标都不会呈现。如果我不这样做，那么我的 webpack 将无法构建，例如：

ERROR in ./node_modules/font-awesome/scss/font-awesome.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/react-svg-loader/lib/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.

那么我该如何解决这两个冲突呢？谢谢。

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config = {
  entry: [
    "babel-polyfill",
    `${SRC_DIR}/app/index.js`,
    `${SRC_DIR}/app/assets/stylesheets/application.scss`, …

我在应用程序中使用Google的api客户端。我有一个名为的函数initialize，该函数gapi.load用于验证我的凭据并加载youtube api。

gapi.load接受一个回调函数，该函数是I authenticate和loadYoutubeApi异步进行的。我想知道，当我运行initialize函数时，这些异步函数何时完成。我有没有办法在此异步回调函数中返回一个值，以便在调用时知道initialize这些异步任务已完成？谢谢！

const apiKey = 'my-api-key';
const clientId = 'my-client-id';

const authenticate = async () => {
  const { gapi } = window;
  try {
    await gapi.auth2.init({ clientId });
    console.log('authenticated');
  } catch (error) {
    throw Error(`Error authenticating gapi client: ${error}`);
  }
};

const loadYoutubeApi = async () => {
  const { gapi } = window;
  gapi.client.setApiKey(apiKey);
  try {
    await gapi.client.load('https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest');
    console.log('youtube api loaded');
  } catch (error) …

我想自定义圆形 svg 的大小，但是，当我将字体大小设置为 300px 时，svg 的大小不会更改/更新。如何通过 css 更改此 svg 的大小？谢谢。

svg {
  font-size: 300px;
}

svg > circle {
  fill: red;
}

svg > path {
  fill: orange;
}

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50"/>
  <path d="M0,50 a1,1 0 0,0 100,0" />
</svg>

我正在使用以下 webpack 配置来处理/加载我的所有 sass 文件。一项重要的项目是我用来additionalData预先附加我的常用样式。然而，这会导致冲突，因为我的 webpack 条目是所有 sass 文件，这意味着我的 webpackcommonStyles.scss已经被加载。当我运行我的应用程序时，出现以下错误：

错误信息：

SassError: This file is already being loaded.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import "src/styles/commonStyles.scss";\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/styles/sizes.scss 1:9  root stylesheet\n

如何创建一个入口点，其中包含我的应用程序中除/排除之外的所有sass 文件（或者更好的是，文件夹中的任何文件）？谢谢您的帮助！ commonStyles.scss/src/styles/

SassError: This file is already being loaded.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import "src/styles/commonStyles.scss";\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/styles/sizes.scss 1:9  root stylesheet\n