Tag: reactjs

ReactJS调用父级方法

我正在做ReactJS的第一步，并试图了解父母与孩子之间的沟通。 我在做forms，所以我有组件的样式字段。 而且我也有包含字段和检查它的父组件。 例： var LoginField = React.createClass({ render: function() { return ( <MyField icon="user_icon" placeholder="Nickname" /> ); }, check: function () { console.log ("aakmslkanslkc"); } }) var MyField = React.createClass({ render: function() { … }, handleChange: function(event) { //call parent! } }) 有没有办法做到这一点。 而且我的逻辑在反应的“世界”中是好的吗？ 谢谢你的时间。

在ReactJS中componentWillMount和componentDidMount有什么区别？

我查看了Facebook的文档https://facebook.github.io/react/docs/component-specs.html ，它提到了如何在客户机/服务器上调用componentWillMount，而componentDidMount只在客户机上调用。 componentWillMount对服务器做了什么？

在Sublime Text 3中，如何为EmX启用JSX文件？

我以前一直在使用Allan Hortle的JSX包，直到遇到一个关于如何处理语法突出显示的问题。 然后我注意到，有一个正式的包， 崇高的反应 。 在Allan Hortle的软件包中，他在Preferences > Key Bindings – User包含了一个片段，用于启用Emmetfunction，如下所示： { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ { "operand": "source.js.jsx", "operator": "equal", "match_all": true, "key": "selector" } ] } 这个片段似乎不适用于官方崇高反应包。 这似乎是要修改的关键绑定的东西，但最初细读的崇高文档没有亮起这个问题。 帮帮我？

React-Native：应用程序尚未注册错误

我目前正在浏览React-Native教程。 我从入门教程开始，在那里我做了一个新的反应本地项目，并成功地设法运行我的设备上的项目。 然后，我开始了Props教程 ，我复制了代码片段，并尝试再次运行该项目，并在屏幕上显示以下错误消息 。

.bind（this）在ajaxcallback结束的目的？

从reactjs教程，在ajaxcallback的末尾有.bind(this)的目的是什么？ 没有它，代码是否正确工作？ data: JSON.stringify({text: text}), success: function (data) { this.setState({data: data}); }.bind(this),

反应onClick函数触发渲染

我将2个值传递给子组件： 要显示的对象的列表 删除function。 我使用.map（）函数来显示我的对象列表（就像在反应教程页面中给出的例子），但是该组件中的button触发onClick函数，渲染（在渲染时不应该触发）。 我的代码如下所示： module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( <div> {todo.task} <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button> </div> ); }, this); return ( <div className="todo-task-list"> {taskNodes} </div> ); } }); 我的问题是：为什么我的onClick函数触发渲染，以及如何使它不能。

SVG使用标签和ReactJS

所以通常包括我需要简单样式的大部分SVG图标，我都这样做： <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 现在我一直在玩ReactJS，后来评估它作为我的新前端开发堆栈中的一个可能的组件，但是我注意到在支持的标签/属性列表中，既不支持use xlink:href也不支持。 是否有可能使用svg sprites并以这种方式在ReactJS中加载它们？

警告：未知的DOM属性类。 你的意思是className？

我刚刚开始探索React，通过添加一个具有简单渲染function的组件： render() { return <div class="myApp"></div> } 当我运行该应用程序时，出现以下错误： Warning: Unknown DOM property class. Did you mean className? 我可以通过将class更改为className来解决此问题。 问题是; React是否执行这个约定？ 另外为什么我需要使用className而不是传统的class ？ 如果这是一个限制，那么是由于JSX语法或其他地方？

在多页面应用中使用React

我一直在玩React，到目前为止，我真的很喜欢它。 我正在用NodeJS构build一个应用程序，并希望在整个应用程序中使用React来实现一些交互式组件。 我不想让它成为单页面的应用程序。 我还没有发现任何在networking上回答以下问题： 如何在多页面应用程序中分解或捆绑我的React组件？ 目前我所有的组件都在一个文件中，即使我可能永远不会在应用程序的某些部分加载它们。 到目前为止，我正在尝试使用条件语句通过searchReact将呈现的容器的ID来呈现组件。 我不完全确定React的最佳实践。 看起来像这样 if(document.getElementById('a-compenent-in-page-1')) { React.render( <AnimalBox url="/api/birds" />, document.getElementById('a-compenent-in-page-1') ); } if(document.getElementById('a-compenent-in-page-2')) { React.render( <AnimalBox url="/api/cats" />, document.getElementById('a-compenent-in-page-2') ); } if(document.getElementById('a-compenent-in-page-3')) { React.render( <AnimalSearchBox url="/api/search/:term" />, document.getElementById('a-compenent-in-page-3') ); } 我仍然阅读文档，并没有find我所需要的多页面应用程序。 提前致谢。

Webpack如何构build生产代码以及如何使用它

我对webpack非常陌生，我发现在生产版本中，我们可以减less整体代码的大小。 目前webpack大约build立了8MB的文件和5MB的main.js。 如何减less生产构build中的代码的大小？ 我从互联网上find一个示例webpackconfiguration文件，并为我的应用程序进行了configuration，我运行了npm run build及其开始构build，并在./dist/目录中生成了一些文件。 这些文件仍然很重（与开发版本相同） 如何使用这些文件？ 目前我正在使用webpack-dev-server来运行应用程序。 package.json文件 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack –config ./webpack.production.config.js –progress –profile –colors" }, "dependencies": […]