小编Arm*_*ias的帖子

React&Redux:connect()到多个组件和最佳实践

我正在研究我的第一个React/Redux项目,我有一个小问题.我读过的文档和观看提供的教程https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist.

但我还有一个问题.这是一个登录页面.所以我有一个名为LoginForm的表示组件:

组件/ LoginForm.js

import { Component, PropTypes } from 'react'

class LoginForm extends Component {
   render () {
      return (
         <div>
            <form action="#" onSubmitLogin={(e) => this.handleSubmit(e)}>
               <input type="text" ref={node => { this.login = node }} />
               <input type="password" ref={node => { this.password = node }} />
               <input type="submit" value="Login" />
            </form>
         </div>
      )
   }

   handleSubmit(e) {
      e.preventDefault();
      this.props.onSubmitLogin(this.login.value, this.password.value);
   }
}

LoginForm.propTypes = {
   onSubmitLogin: PropTypes.func.isRequired
};

export default LoginForm;
Run Code Online (Sandbox Code Playgroud)

还有一个名为Login的容器组件,它将数据传递给我的组件.使用react-redux-router,我称之为容器(而不是presentationnal组件):

集装箱/ Login.js

import { connect } …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux

17
推荐指数
1
解决办法
2万
查看次数

React&Redux:简单的异步登录

我是React和Redux的初学者,我正在尝试设置一个非常简单的登录表单和重定向.我稍后会添加react-router或react-router-redux.

我真的不明白我必须把我的'逻辑代码'放在哪里(ajax调用和重定向).

这是我写的.

index.js(入口点):

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import rootReducer from './reducers/reducers'

let store = createStore(rootReducer);
let rootElement = document.getElementById('root');

render(
   <Provider store={store}>
      <App />
   </Provider>,
   rootElement
);
Run Code Online (Sandbox Code Playgroud)

containers/App.js:

import { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../actions/actions'
import LoginForm from '../components/LoginForm'

class App extends Component {
   render () …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux

5
推荐指数
1
解决办法
9008
查看次数

如何正确使用PrismJS及其打字与打字稿/角度2

我正在使用angular-cli构建一个小应用程序,我想使用PrismJS,但我无法使用它.

基本上我已经创建了一个供应商文件夹,我将Prism的脚本和样式放在index.html中.

我还需要安装类型定义才能编译我的应用程序:

npm i --save-dev @typings/prismjs
Run Code Online (Sandbox Code Playgroud)

然后,我只需要Prism.whatever()在我的代码中的任何地方调用,但这不起作用.

甚至我的IDE也无法识别命名空间Prism.

通过检查定义的内容(index.d.ts)我已经看到,自1.6版以来,它不包含

declare var Prism : PrismJS.Prism;
Run Code Online (Sandbox Code Playgroud)

了.只有一些export namespace Prism.所以我想知道是否必须导入一些东西,因为任何declare使用.

从定义文件中导入一些东西对我来说似乎很奇怪.

当我想要跨过这个时,我已经安装了包含的定义的旧版本(1.4.16)

declare var Prism : PrismJS.Prism;
Run Code Online (Sandbox Code Playgroud)

现在,我的IDE(webstorm)很高兴!它可以识别Prism.但是当我尝试编译时,webpack仍会输出错误:

Cannot find name 'Prism'
Run Code Online (Sandbox Code Playgroud)

所以我的问题非常基本:我忘记了什么?

抱歉这个显而易见的问题.

谢谢!

typescript angular

4
推荐指数
2
解决办法
3639
查看次数

标签 统计

javascript ×2

reactjs ×2

redux ×2

angular ×1

typescript ×1