我是ES6的新手.在编写React组件的不同方法上有点困惑.我从"React.createClass"开始,然后使用ES6类语法移动到"扩展React.Component".
现在关注Redux教程,我看到他们以这种方式定义组件
import React, { PropTypes } from 'react'
const Todo = ({ onClick, completed, text }) => (
<li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} >
{text}
</li>
)
Todo.propTypes = {
onClick: PropTypes.func.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}
export default Todo
我怎样才能重构这个"函数"移动到扩展React.component的ES6类？我想返回JSX是render()方法,不是吗？那么onClick,已完成的文本参数呢？
谢谢
我正在使用React Redux教程.我真正没有得到的是如何检索用户输入.
他们构建了一个FilterLink容器,其mapDispatchToProps是
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
因此它将自己的Pop.filter注入连接的表示组件.如果我们去看看这个容器是如何构建的
const Footer = () => (
<p>
Show:{" "}
<FilterLink filter="SHOW_ALL">All</FilterLink>{", "}
<FilterLink filter="SHOW_ACTIVE">Active</FilterLink>{", "}
<FilterLink filter="SHOW_COMPLETED">Completed</FilterLink>
</p>
)
好的,有"过滤器"属性.这很清楚.
现在我想在同一个例子上构建一个文本过滤器.首先,这是我的表现部分
const TodoSearch = ({onSubmit}) => (
<form
onSubmit={e => {
e.preventDefault()
onSubmit()
}}
>
<input placeholder="Text search" />
<input type="submit" value="Go" />
</form>
)
但是当我来写容器时,我不知道如何获得用户输入
const mapDispatchToProps = (dispatch) => {
return {
onSubmit: () => { …我是现代前端开发工具的新手。我安装了Nodejs和NPM。下载了一些软件包（例如：“ jquery”），一切正常。然后我安装了Webpack（第2版），创建了这个演示配置文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
}
};
在我的JS入口点（entry.js）中，我可以成功使用jQuery模块，如下所示
var $ = require("jquery");
$('#test').html('Changed!');
一切正常。我去Vue时会出现问题。我安装
npm install vue --save
然后用
var Vue = require("vue");
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
我不知道如何导入，然后使用构造函数。我写的清楚是不对的！实际上我得到这个错误
TypeError: Vue is not a constructor
我想念什么？（注意：我不使用任何其他工具，仅使用Nodejs + NPM + Webpack2，并且如果可能的话，我想继续仅使用这三个工具）。
谢谢Marco
好的，我使用 Gulp 和 Browserify 构建的新 PHP/JS 应用程序接近终点线。最后一部分是如何“启动”，我的意思是如何进行“第一次调用”。
假设我有 3 个 JS 入口点
/js/articles.js
/js/categories.js
/js/comments.js
他们每个人都使用一些 JS 模块。然后我有 3 个 HTML 文件，需要它们的 JS
/articles.html
/categories.html
/comments.html
示例/js/articles.js
var $ = require("jquery");
var common = require("../common.js");
var viewModel = {
readData: function() {
/* read record from API and render */
},
insert: function() {
/* open a modal to insert new record */
}
};
我现在应该做的是执行这种“启动”：即调用我需要的一些 init 函数，然后加载服务器数据，然后将所有按钮和东西绑定到 viewModel 的方法
$(document).ready(function() {
common.init();
viewModel.readData();
$('#btn-add').click(viewModel.insert);
});
好的，但是我把这个放在哪里？
A) 在 HTML …
我正在寻求帮助.
我做了一个全新的Laravel装置(此时为5.2.15).我不是在使用Homested.我chmod'存储'目录和子目录,如文档所示,给予写入权限.会话配置为默认值,未触及任何内容.因此会话驱动程序是'文件',路径是'框架/会话'.
我写这些测试路线:
Route::get('/', function () {
session(["test" => "ok"]);
return view('welcome');
});
Route::get('/2', function () {
print "session = ".session('test');exit();
});
看到会话工作不应该足够吗？session('test')为null,并且没有在框架/会话中写入文件.Chmoded 777框架/会话文件夹,确保没有任何改变.
我是Laravel的新手..也许我错过了什么？我需要在config/session.php中设置这些变量吗？
'path' => '/',
'domain' => null,
谢谢
我在以下代码中缺少什么？为什么Perfect 滚动条会崩溃？
似乎将 myDiv 滚动条与浏览器主滚动条搞混了……感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<link href="perfect-scrollbar.min.css" type="text/css" rel="stylesheet">
<style>
#myDiv {
width: 400px;
height: 400px;
overflow: auto;
background-color: #eeeeee;
margin: auto;
}
</style>
</head>
<body>
<div id="myDiv">
<p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect …javascript ×5
reactjs ×2
browserify ×1
ecmascript-6 ×1
gulp ×1
html ×1
jquery ×1
laravel ×1
laravel-5 ×1
node-modules ×1
node.js ×1
npm ×1
php ×1
redux ×1
scrollbar ×1
session ×1
vue.js ×1
web-frontend ×1
webpack ×1