我正在使用React,React-Router(v5)和Redux构建应用程序,并想知道如何在父路由中访问当前URL的参数.

这是我的条目,router.js:

<Wrapper>
  <Route exact path="/login" render={(props) => (
    <LoginPage {...props} entryPath={this.entryPath} />
  )} />

  <Route exact path="/" component={UserIsAuthenticated(HomePage)} />
  <Route exact path="/about" component={UserIsAuthenticated(AboutPage)} />
  <Route path="/projects" component={UserIsAuthenticated(ProjectsPage)} />
</Wrapper>

那是我的ProjectsPage组成部分:

class ProjectsPage extends PureComponent {
  componentDidMount() {
    this.props.fetchProjectsRequest()
  }

  render() {
    console.log(this.props.active)

    if (this.props.loading) {
      return <Loading />
    } else {
      return (
        <Wrapper>
          <Sidebar>
            <ProjectList projects={this.props.projects} />
          </Sidebar>
          <Content>
            <Route exact path="/projects" component={ProjectsDashboard} />

            <Switch>
              <Route exact path="/projects/new" component={ProjectNew} />
              <Route exact path="/projects/:id/edit" component={ProjectEdit} …

如何从Ember模型中获取相关记录？或者:如何从Promise对象获取记录？

客户模式

Docket.Customer = DS.Model.extend({
  name:        DS.attr('string'),
  initial:     DS.attr('string'),
  description: DS.attr('string'),
  number:      DS.attr('string'),
  archived:    DS.attr('boolean'),
  projects:    DS.hasMany('project',{ async: true })
});

项目模型

Docket.Project = DS.Model.extend({
  name:        DS.attr('string'),
  description: DS.attr('string'),
  number:      DS.attr('string'),
  archived:    DS.attr('boolean'),
  customer:    DS.belongsTo('customer', { async: true })
});

查找方法

var project = this.store.find('project', id).then(function(data) {
  console.log(data.get('customer').toString());
});

控制台输出

<DS.PromiseObject:ember654> 

JSON响应

{"projects":[
  {
    "id":1,
    "name":"test",
    "number":"a310",
    "description":null,
    "archived":false,
    "customer_id":22
  }
]};

我正在玩弄create-react-app和代码分裂.在我开始导入供应商库之前,它工作得非常好,这些库将包含在每个块中.

这是我目前的做法:

App.js

const HomePage = Loadable({
  loader: () => import('./Home.js'),
  LoadingComponent: Loading
});

const AboutPage = Loadable({
  loader: () => import('./About.js'),
  LoadingComponent: Loading
});

class App extends PureComponent {
  render() {
    return (
      <Router>
      <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={HomePage}/>
      <Route path="/about" component={AboutPage}/>
    </div>
  </Router>
    );
  }
}

About.js

import React, { PureComponent } from 'react';
import styled from 'styled-components';

const Button = styled.button`
  color: aqua;
`;

class AboutPage extends PureComponent …

使用jQuery Mobiles滑动事件时,是否可以获得回调函数中的方向和距离？我在官方文档中没有发现任何相关内容.

TouchSwipe是一个不错的选择,但我需要tapjQuery Mobile 的事件形式,我不想包含两个库.

我正在将 Visual Studio Code 用于 React 项目，并且有很多.js文件，如下所示：

import React, { PureComponent } from 'react'

class Foobar extends PureComponent {
  render() {
    return (
      <main>
        Foo
      </main>
    )
  }

}

export default Foobar

React 自己的方法的自动完成工作正常（就像添加componentWill...到组件中一样），但在输入 JSX 时我没有得到任何建议。输入类似onCli...into 的内容main并不建议onClick。

我找到了一些关于打字稿定义的教程，所以我安装了：

"@types/react": "^16.0.36",
"@types/react-dom": "^16.0.3",

但这没有任何作用。即使我将文件从.js重命名为.jsx，.ts或者.tsx我也无法获得 JSX 属性的自动完成功能。

有什么我错过的吗？

我还创建了一个jsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules" …

我正在构建一个自定义钩子，我想在其中向 ref 添加一个事件侦听器，但我不确定如何正确清理，因为listRef和listRef.current可能为空：

export const myHook: MyHook = () => {
  const listRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // I can check for the presence of `listRef.current` here ...
    if (listRef && listRef.current) {
      listRef.current.addEventListener(...)
    }

    // ... but what's the right way for the return function?
    return listRef.current.removeEventListener(...)
  })

  return [listRef]
}

我想知道为什么D3.js不会将命名空间属性添加到SVG元素.

d3.ns.prefix.ex = 'http://example.com/';
var chart = d3.select('#chart').append('svg:svg');

我认为输出应该是这样的:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:ex="http://example.com/">

其实只是

<svg>

看到这个小提琴的完整例子:http://jsfiddle.net/7kWDK/

我正在使用Ember 1.8.1,Ember Data 1.0.0-beta.12,Handlebars 1.3.0,jQuery 1.11.1,Ember Simple Auth 0.7.2和Ember Simple Auth Devise 0.7.2作为我的前端.我的后端支持Rails,Grape和Devise.

现在我正在尝试构建一个简单的身份验证.登录效果很好:Ember应用程序将登录凭据发送到我的Rails API并获取访问令牌.令牌被写入localStorage并重新加载页面工作正常.但据我了解Ember Simple Auth(参见本演示),所有未来的AJAX请求都将使用此标记作为Authorization标题执行- 但事实并非如此.

我是否必须自己设置ajaxPrefilter或者Ember Simple Auth为我做这个并且我的代码/ Ember Simple Auth中有一些错误？

更新1

我刚刚玩了一些console.log调试.似乎该authorize函数不会被触发.除了之外,所有其他功能都可以成功记录authorize.

更新2

问题解决:忘了设置crossOriginWhitelist.

我想知道为什么我的模板createRecord在findQuery用于获取数据后没有得到更新.

将此更改return this.store.findQuery('timetracking', {year: year, month: month, user_id: user_id});为return this.store.find('timetracking');模板时,将使用我的新记录进行更新.

我不想获取所有记录以保存带宽,但是当仅find/findQuery使用查询参数时,我新创建的记录不会显示在我的模板中.

我是否必须进行"强制"重装？怎么做？

更新

灰烬检查员显示新记录.

有什么办法可以在打字稿中将泛型标记为强制性的？

function onSubmit<Result, Variables>({
    foo,
    bar
  }: {
    foo: Result
    bar: Variables
  }) {
    console.log(foo, bar)
}

// this should not be possible without passing the Generics
onSubmit({ foo: 'foo', bar: 'bar' })

// this works as expected 
onSubmit<number, number>({ foo: 'foo', bar: 'bar' })

操场

编辑

该问题已得到回答，它就像一个魅力。为了更好地理解我为什么要使用此功能，下面是一个示例。

onSubmit<UpdateUserMutation, UpdateUserMutationVariables>({
  mutation: UpdateUserDocument,
  variables: { id: user.id, user: formData },
  refetchQueries: ['GetUserList'],
  onSuccess: ({ data }) => history.push(`/users/${data.updateUser.id}`),
})

当我省略时<UpdateUserMutation, UpdateUserMutationVariables>，我不知道data我的onSuccess职能将是什么。另外，我不知道必须将哪些变量传递给variables键。更不用说IDE集成了:-)

可以肯定的是，我可以{ …