Questions tagged «reactjs»

我想问一下如何处理本机句柄或做响应字体。例如，在iphone 4s中，我的fontSize：14，而在iphone 6中，我的fontSize：18。

91 ios  reactjs  react-native 

我不敢相信我在问一个明显的问题，但在控制台日志中仍然出现错误。 控制台表示无法在目录中找到该模块，但是我至少检查了10次错别字。无论如何，这是组件代码。 我想在根中渲染Header import React, { Component } from 'react' import Header from './src/components/header/header' import logo from './logo.svg' import './App.css' class App extends Component { render() { return ( <Header/> ); } } export default App; 这是Header组件 import React, { Component } from 'react' import ReactDOM from 'react-dom' import navBar …

91 javascript  reactjs 

我知道chrome扩展使用'manifest.json`，但是在这里，它也被用作其他东西。 内容- { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "192x192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } 当我更改某些值时，页面会更新，但没有任何变化。

91 reactjs  manifest  create-react-app 

我认为标题说明了一切。每当我卸载仍在取回的组件时，都会显示黄色警告。 安慰 警告：无法在未安装的组件上调用setState（或forceUpdate）。这是一项禁忌措施，但是...若要修复，请取消方法中的所有订阅和异步任务componentWillUnmount。 constructor(props){ super(props); this.state = { isLoading: true, dataSource: [{ name: 'loading...', id: 'loading', }] } } componentDidMount(){ return fetch('LINK HERE') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function(){ }); }) .catch((error) =>{ console.error(error); }); }

90 reactjs 

我对使用<input>时如何获取价值感到困惑mount。这是我的测试内容： it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); 控制台将输出undefined。但是，如果我稍微修改一下代码，它就会起作用： it('cancels changes when user presses esc', done => { const wrapper = render(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.val()); input.simulate('focus'); done(); }); 当然，除了那input.simulate行因为我现在正在使用而失败render。我都需要正常工作。我该如何解决？ 编辑： …

90 unit-testing  reactjs  enzyme 

我是React的新手，正在尝试DATA从外部文件导入JSON变量。我收到以下错误： 找不到模块“ ./customData.json” 有人可以帮我吗？如果我的DATA变量位于index.js外部JSON文件中，但没有该变量，则它可以工作。 index.js import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import customData from './customData.json'; import Profile from './components/profile'; import Hobbies from './components/hobbies'; class App extends Component { render() { return ( <div> <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} /> <Hobbies hobbyList={this.props.profileData.hobbyList}/> </div> ); } } ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container')); hobbies.js import …

90 javascript  json  reactjs 

我有多个组件都需要做同一件事。（一个简单的函数可以映射其子组件，并对每个子组件执行某些操作）。目前，我正在每个组件中定义此方法。但我只想定义一次。 我可以在顶级组件中定义它，然后将其作为道具传递。但这并不完全正确。它更多的是库函数而不是道具。（在我看来）。 正确的做法是什么？

90 reactjs 

我正在尝试将表示性组件与容器组件分开。我有一个SitesTable和一个SitesTableContainer。容器负责触发redux操作，以根据当前用户获取适当的网站。 问题是在最初呈现容器组件之后，异步获取了当前用户。这意味着容器组件不知道它需要重新执行其componentDidMount函数中的代码，该代码将更新数据以发送到SitesTable。我认为当其props（user）之一更改时，我需要重新渲染容器组件。如何正确执行此操作？ class SitesTableContainer extends React.Component { static get propTypes() { return { sites: React.PropTypes.object, user: React.PropTypes.object, isManager: React.PropTypes.boolean } } componentDidMount() { if (this.props.isManager) { this.props.dispatch(actions.fetchAllSites()) } else { const currentUserId = this.props.user.get('id') this.props.dispatch(actions.fetchUsersSites(currentUserId)) } } render() { return <SitesTable sites={this.props.sites}/> } } function mapStateToProps(state) { const user = …

90 reactjs  redux  react-redux 

我正在尝试将<canvas>在这里找到的这个很棒的动画转换为React可重用的组件。看来此组件将需要一个父组件作为画布，而许多子组件则为function Ball()。 出于性能方面的考虑，将它们Balls变成无状态组件可能会更好，因为会有很多这样的组件。我不熟悉制作无状态组件，并且想知道应该在哪里定义this.update()和中定义的和this.draw函数function Ball()。 无状态组件的功能是在组件内部还是外部？换句话说，以下哪个更好？ 1： const Ball = (props) => { const update = () => { ... } const draw = () => { ... } return ( ... ); } 2： function update() { ... } function draw() { ... } const Ball = (props) => { …

90 reactjs 

当在下拉菜单组件之外单击时，我想关闭一个下拉菜单。 我怎么做？

89 reactjs 

说我有一个简单的切换： 当我单击按钮时，颜色组件在红色和蓝色之间切换 我可以通过执行以下操作来达到此结果。 index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} 但这是很多代码的地狱，我可以用jQuery，一些类和一些CSS在5秒钟内完成一些事情。 所以我想我真正要问的是，我在这里做错了什么？

89 javascript  reactjs  redux 

我正在重写我的应用程序以使用Flux，但从商店检索数据时遇到问题。我有很多组件，它们嵌套很多。其中有些是大（Article），有些是小而简单（UserAvatar，UserLink）。 我一直在努力在组件层次结构中的什么地方应该从商店读取数据。 我尝试了两种极端的方法，但我都不喜欢： 所有实体组件都读取自己的数据 需要从商店中获取一些数据的每个组件仅接收实体ID，并自行检索实体。 例如，Article被传递articleId，UserAvatar并UserLink传递userId。 这种方法有几个明显的缺点（在代码示例下讨论）。 var Article = React.createClass({ mixins: [createStoreMixin(ArticleStore)], propTypes: { articleId: PropTypes.number.isRequired }, getStateFromStores() { return { article: ArticleStore.get(this.props.articleId); } }, render() { var article = this.state.article, userId = article.userId; return ( <div> <UserLink userId={userId}> <UserAvatar userId={userId} /> </UserLink> <h1>{article.title}</h1> <p>{article.text}</p> <p>Read more by <UserLink …

89 javascript  reactjs  reactjs-flux 

我实质上是想让标签页做出反应，但是有一些问题。 这是档案 page.jsx <RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup> 当你点击按钮A，在RadioGroup中组件需要去选择按钮B。 “选择”仅表示来自状态或属性的className 这里是RadioGroup.jsx： module.exports = React.createClass({ onChange: function( e ) { // How to modify children properties here??? }, render: function() { return (<div onChange={this.onChange}> {this.props.children} </div>); } }); 的来源Button.jsx并不重要，它有一个触发原始DOM onChange事件的常规HTML单选按钮 预期流量为： 点击按钮“ A” 按钮“ A”触发本地DOM事件onChange，该事件一直持续到RadioGroup 调用RadioGroup onChange侦听器 RadioGroup中需要去选择按钮B。这是我的问题。 …

89 reactjs 

我正在寻找使用React实现无限滚动的方法。我遇到了react-infinite-scroll，发现它效率低下，因为它只是将节点添加到DOM中，而不会删除它们。React是否有经过验证的解决方案，可以添加，删除和维护DOM中恒定数量的节点。 这是jsfiddle问题。在这个问题中，我想一次只在DOM中包含50个元素。当用户上下滚动时，应加载和删除其他对象。由于其优化算法，我们已经开始使用React。现在我找不到解决此问题的方法。我遇到过airbnb Infinite js。但这是用Jquery实现的。要使用这个airbnb无限滚动，我必须放弃我不想做的React优化。 我想添加滚动的示例代码是（这里我正在加载所有项目。我的目标是一次仅加载50个项目） /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); var HelloList = React.createClass({ getInitialState: function() { var numbers = []; for(var i=1;i<10000;i++){ numbers.push(i); } return {data:numbers}; }, render: function(){ var response = this.state.data.map(function(contact){ return (<Hello name="World"></Hello>); }); return …

89 javascript  html  infinite-scroll  reactjs 

在子组件的父项上执行setState的推荐模式是什么？ var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); return <div> <h3>Todo(s)</h3> {todos} <TodoForm /> </div>; } }); var TodoForm = React.createClass({ getInitialState: function() { return …

89 reactjs