小编Jon*_*a33的帖子

我正在使用 Visual Studio 代码。如何在 .tsx 文件上启用 emmet？

我想要一个简单的

.foo + tab

扩展到

<div className="Foo"></div>

但是，我尝试的任何内容似乎都没有触发上述所需行为的 emmet。

这是我的 VSC 设置：

  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact",
    },

我正在尝试使用async / await和try / catch了解异步调用。

在下面的示例中，如何将成功的响应保存到可以在其余代码中使用的变量？

const axios = require('axios');
const users = 'http://localhost:3000/users';

const asyncExample = async () =>{
    try {
        const data = await axios(users);
        console.log(data); //200
    }
    catch (err) {
        console.log(err);
    }
};

//Save response on a variable
const globalData = asyncExample(); 
console.log(globalData) //Promise { <pending> }

这个在静态视图上相当简单的平凡任务不符合React.

有人可以告诉我如何在新标签上打开pdf文件作为href吗？

这是我使用react-bootstrap和react-router的代码:

    <NavDropdown eventKey={3} title="Forms">

        <MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>

        <MenuItem eventKey={3.2} href="samba.pdf" target="_blank">Form 2</MenuItem>
    </NavDropdown> 

谷歌的外部链接工作正常.

pdf(保存在与上面代码相​​同的级别目录中)不是.

当我点击pdf链接时,它会将我重定向到我的"404 catch all"路线.

    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact" exact component={Contact} />
        <Route path="/about" exact component={About} />
        <Route component={NotFound} />
    </Switch>;

编辑: 解决方案: Link_Cable回答

我正在使用 React Router 4 渲染一个组件 render={() => </Component />}

我需要将状态传递给给定的组件，即： <Game />

export const Routes: React.SFC<{}> = () => (
  <Switch>
    <Route path="/" exact={true} component={Home} />
    <Route path="/play-game" render={() => <Game {...this.state} />} />
    <Redirect to="/" />
  </Switch>
)

TS 说：

The containing arrow function captures the global value of 'this' which implicitly has type 'any'

最终目标是能够将 传递Routes给我的主应用程序：即：

export default class App extends Component<{}, AppState> {
  public state = {
    // state logic
  }

  public render(): JSX.Element { …

我想用我的下拉菜单完成以下任务。

1 - 单击时显示

2 - 第二次单击时隐藏它

3 - 单击外部任意位置时将其隐藏。

4 - 使用幻灯片效果完成所有这些

我已经覆盖了 1-3 个。我4号就被堵住了

如何创建幻灯片效果以及下面发生的以下单击事件？

我已经使用 jQuery 的 SlideToggle （此处未显示）进行了有效的概念验证...但是，我想学习如何以反应方式做到这一点。

如果您想查看完整的代码： react drop-down nav bar

// CASE 1 Show Hide on click, no slide effect yet  
class ServicesDropdown extends Component {
    constructor() {
        super();
        this.state = {
            dropdown: false
        };
    }

    handleClick = () => {
        if (!this.state.dropdown) {
            // attach/remove event handler
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdown: …

使用React Router 4.2

我的尝试是在单击导航链接后打开一个新选项卡，同时将其重定向到网站主页。

即：导航栏：单击策略

即使下面的代码具有上述要求：这是否是建议的解决方法？旨在在Routes.js上学习最佳做法。

 //Routes.js
 import HandbookDoc from './policies.pdf'
 ...

 <Route 
   path="/registration/policies" 
   component={() => window.open(`${HandbookDoc}`,'_blank').then(window.location= '/')} 
 />

....

 //Navigation.js (using react-router-bootstrap)
  <NavDropdown eventKey={3} id="formId" title="Registration">
     <LinkContainer to="/registration/financial-aid">
        <MenuItem eventKey={3.1}>Financial Aid</MenuItem>
      </LinkContainer>
      <LinkContainer to="/registration/policies">
        <MenuItem eventKey={3.2}>Policies</MenuItem>
      </LinkContainer>
  </NavDropdown>

了解React Router时，我注意到从路由a切换到b时，组件将返回其初始状态。

为什么在同一路线上再次点击（即从a到a）时却没有发生同样的事情？

我如何实现一种方法，在该路径上单击<NavLink/>组件会恢复到其原始状态-应该/可以在onChangeReact Router 的钩子上完成吗？

如果这是一种反模式，请向我说明如何完成以下工作：我不仅需要在切换路线时而且在用户选择再次单击同一条路线时，都需要将组件恢复为原始状态。。

下面是问题的抽象：

单击Cat <p/>标签应将其颜色更改为green，单击同一路线<NavLink to="/cat-view">cat</NavLink>应将cat颜色状态恢复为初始状态。即color: false

就像从路线a切换到路线b（在我的情况下是猫到狗）一样

// Cat Component
import React, { useState } from "react";

export const Cat = () => {
  const [color, setColor] = useState(false);

  function ChangeColor() {
    setColor(true);
  }

  console.log(color)

  return (
    <p onClick={ChangeColor}>
      Click on this <span className={color ? "green" : " "}>Cat</span>
    </p>
  );
}; …

我的 App 组件将事件处理程序作为道具传递给 Button Component

// App.js

  public handlePlay = () => {
    this.setState({ ****** })
  }

// render

<Button play={this.handlePlay} />

通过 prop ie 传递的事件处理程序的正确类型是什么play？

// Button.js
interface ButtontProps {
  play: any //what is the correct type here?
}

export const Button: React.SFC<ButtontProps> = ({ play }) => (
  <button onClick={play}>Play</button>
)

我不想使用，any因为这会使我无法为这样的实例应用正确的类型。

我如何在JavaScript 中将字符串重新格式化为由短划线( - )分隔的3位数字块？

例如:

let myString = "00  64 33 3-44-23 982-  23-1-0"

产生所需的输出为:

myString = "006-433-344-239-822-310"

如何将两个不同的JSON响应组合到一个对象中,以便我可以从单个源处理我的数据？

我已经阅读了不同的实现,但不是我现在编写代码的方式.

我很漂亮,所以如果你能给我一个动手实例,我将非常感激.

例如:

$(function() {
    let hotels = 'data1.json';
    let guests = 'data2.json';
    $.getJSON(hotels)
        .then(function (res) {
            console.log(res);
        })
        .fail(function (err) {
            console.log(err);
        });
    $.getJSON(guests)
        .then(function (res) {
            console.log(res);
        })
        .fail(function (err) {
            console.log(err);
        });

      /*** start logic for application here ***/  

    let newObject = //How can I combine both responses above???
    console.log(newObject);


});

同意我从每个请求得到的回复: