Questions tagged «reactjs»

我有一个要在其中index.js构建的轮播文件block.build.js，所以我webpack.config.js是： var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] } } ] } }; module.exports = config; 在package.json我使用低于： { "name": …

87 reactjs  webpack  babeljs 

我有下一个代码，随便抛出： 反应/道具类型onClickOut; 道具验证中缺少 反应/道具型儿童；道具验证中缺少 propTypes 已定义，但eslint无法识别。 import React, { Component, PropTypes } from 'react'; class IxClickOut extends Component { static propTypes = { children: PropTypes.any, onClickOut: PropTypes.func, }; componentDidMount() { document.getElementById('app') .addEventListener('click', this.handleClick); } componentWillUnmount() { document.getElementById('app') .removeEventListener('click', this.handleClick); } handleClick = ({ target }: { target: EventTarget }) => …

87 javascript  reactjs  eslint  flowtype 

我有一个使用React组件的复杂网页，并且正在尝试将该页面从静态布局转换为响应更快，可调整大小的布局。但是，我一直遇到React的限制，并且想知道是否存在用于处理这些问题的标准模式。在我的特定情况下，我有一个使用display：table-cell和width：auto呈现为div的组件。 不幸的是，我无法查询组件的宽度，因为您无法计算元素的大小，除非将元素实际放置在DOM中（该元素具有推断实际呈现的宽度的完整上下文）。除了将其用于诸如相对鼠标定位之类的事情之外，我还需要它来在组件内的SVG元素上正确设置宽度属性。 另外，当窗口调整大小时，如何在设置过程中将尺寸变化从一个组件传递到另一个组件？我们正在shouldComponentUpdate中完成所有所有的第三方SVG渲染，但是您无法在该方法中设置自己或其他子组件的状态或属性。 是否有使用React处理此问题的标准方法？

86 javascript  reactjs  responsive 

我可能想念一些很明显的东西，想让自己清楚。 这是我的理解。 在幼稚的react组件中，我们有states＆props。更新state时会setState重新渲染整个组件。props大多是只读的，更新它们没有任何意义。 在订阅redux商店的react组件中，通过类似于store.subscribe(render)，它每次商店更新时都会重新渲染。 react-redux具有一个帮助程序，它通常通过类似以下方式connect()注入状态树的一部分（组件感兴趣）和actionCreatorsprops组件 const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) 但是，了解到asetState对于TodoListComponent响应redux状态树更改（重新渲染）必不可少，因此在组件文件中找不到任何state或setState相关代码TodoList。它的内容如下： const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) 有人可以指出我所缺少的正确方向吗？ 附言：我遵循与redux软件包捆绑在一起的待办事项列表示例。

86 reactjs  redux  react-redux 

问题 我正在ref使用内联函数定义设置反应 render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> 然后在componentDidMountDOM引用中未设置 componentDidMount = () => { // this.drawerRef is not defined 我的理解是，ref回调应在安装期间运行，但是在ref回调函数之前调用添加console.log语句揭示。componentDidMount 例如，我看过的其他代码示例在github上的讨论都表明相同的假设，componentDidMount应该在中定义的任何回调之后ref调用render，甚至在对话中也要说明 那么在所有的ref回调都执行完之后，componentDidMount是否被触发？ 是。 我正在使用反应15.4.1 我尝试过的其他事情 为了验证该ref函数是否已被调用，我尝试在类上将其定义为 setDrawerRef = (drawer) => { this.drawerRef = drawer; } 然后在 render <div className="drawer" ref={this.setDrawerRef}> 在这种情况下，控制台记录显示回调确实在之后被调用 componentDidMount

86 javascript  reactjs 

与ListView不同，我们可以更新this.state.datasource。是否有任何方法或示例来更新FlatList或重新呈现它？ 我的目标是在用户按下按钮时更新文本值。 renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { this.list = ref; }} keyExtractor={(item) => item.entry.entryId} data={this.state.data} renderItem={this.renderEntries.bind(this)} horizontal={false} />

86 reactjs  react-native  react-native-flatlist 

我的目标是在页面/父组件上动态添加组件。 我从这样的一些基本示例模板开始： main.js： var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js： var App = React.createClass({ render: function() { return ( <div> <h1>App main component! </h1> <div id="myId">myId div</div> </div> ); } }); SampleComponent.js： var SampleComponent = React.createClass({ render: function() { return ( <div> <h1>Sample …

86 javascript  reactjs  babeljs 

我正在用React实现一个可过滤列表。列表的结构如下图所示。 前提 这是它应该如何工作的描述： 状态位于最高级别的Search组件中。 状态描述如下： { 可见：布尔值， 文件：数组， 过滤：数组， 请求参数， currentSelectedIndex：整数 } files 是一个可能非常大的包含文件路径的数组（10000个条目是一个合理的数字）。 filtered是用户键入至少2个字符后的过滤数组。我知道它是派生数据，因此可以就将其存储在状态中进行论证，但对于 currentlySelectedIndex 这是过滤列表中当前选定元素的索引。 用户在Input组件中输入两个以上的字母，对数组进行过滤，并为过滤后的数组中的每个条目Result呈现一个组件 每个Result组件都显示与查询部分匹配的完整路径，并突出显示路径的部分匹配部分。例如，如果用户输入了“ le”，那么Result组件的DOM将是这样的： <li>this/is/a/fi<strong>le</strong>/path</li> 如果用户在Input聚焦组件时按下向上或向下键，则currentlySelectedIndex基于filtered阵列的更改。这导致Result与索引匹配的组件被标记为选中，从而导致重新渲染 问题 最初，我files使用React的开发版本使用足够小的数组对它进行了测试，并且一切正常。 当我不得不处理files多达10000个条目的数组时，出现了问题。在“输入”中键入2个字母会生成一个大列表，当我按向上和向下键进行导航时，它会很麻烦。 最初，我没有为Result元素定义组件，而只是在Search组件的每个渲染过程中即时创建列表，如下所示： results = this.state.filtered.map(function(file, index) { var start, end, matchIndex, match = this.state.query; matchIndex = file.indexOf(match); start = file.slice(0, matchIndex); end = file.slice(matchIndex + match.length); …

86 javascript  list  reactjs 

我已经设定eslint＆eslint-plugin-react。 当我运行ESLint时，linter会no-unused-vars为每个React组件返回错误。 我假设它没有意识到我正在使用JSX或React语法。有任何想法吗？ 例： app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> {this.props.children} </div> ); } } 短绒错误： /my_project/src/components/app.js 1:8 error 'React' is defined but never used no-unused-vars 2:8 error 'Header' is …

86 javascript  reactjs  jsx  eslint 

我有一个化简器，为了计算新状态，我需要操作中的数据以及该化简器未管理的部分状态数据。具体来说，在我将在下面显示的reducer中，我需要访问该accountDetails.stateOfResidenceId字段。 initialState.js： export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } }; FormsReducer.js： import * as types from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './initialState'; import formsHelper from '../utils/FormsHelper'; export default function formsReducer(state = initialState.forms, action) { …

86 javascript  reactjs  redux 

我在使用react-select时遇到问题。我使用redux表单，并且使我的react-select组件与redux表单兼容。这是代码： const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.onChange(value)} onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} selectedValue={props.selectedValue} /> ); 这里是我如何渲染它： <div className="select-box__container"> <Field id="side" name="side" component={SelectInput} options={sideOptions} clearable={false} placeholder="Select Side" selectedValue={label: 'Any', value: 'Any'} /> </div> 但是问题是我的下拉菜单没有我希望的默认值。我做错了什么？有任何想法吗？

86 reactjs  default-value  react-select 

我已经尝试过寻找答案，但是其中大多数都在React的上下文之外，而后者onChange会在模糊时触发。 在执行各种测试时，我似乎无法分辨出这两个事件有何不同（应用于文本区域时）。谁能对此有所启发？

86 javascript  reactjs  dom-events 

OP EDIT：如果其他人遇到此问题：该应用程序是使用create-react-app创建的，它将导入限制在src文件夹内。但是，如果将react-scripts升级到v1.0.11，则可以访问package.json。 我正在尝试从我的应用程序中的package.json获取版本号。 我已经尝试过这些建议，但是它们都没有起作用，因为我无法从src文件夹之外访问package.json（可能是由于React，我是新来的）。移动的package.json到SRC那么意味着我不能跑npm install，npm version minor和npm run build从我的根文件夹。我试过使用，process.env.npm_package_version但是导致未定义。 我正在使用Jenkins，但还没有设置它来推动提交，但是我唯一的想法是从GitLab中的标签获取版本，但是我不知道如何做到这一点，它会给仓库增加不必要的依赖性，所以我真的很想找到一个替代方案。 编辑：我的文件结构是这样的： --> RootAppFolder |--> build |--> node_modules |--> public |--> src |--> Components |--> Root.js | |--> package.json 因此，要从Root.js访问package.json，我将import packageJson from './../../package.json'得到以下错误： ./src/components/Root.js 找不到模块：您试图导入./../../package.json，它不在项目src /目录下。不支持src /以外的相对导入。您可以将其移动到src /中，也可以从项目的node_modules /中向其添加符号链接。

86 node.js  reactjs  npm  react-redux  create-react-app 

Redux应用程序中的初始状态可以通过两种方式设置： 将其作为第二个参数传递给createStore（docs link） 将其作为第一个参数传递给您的（子）还原器（docs链接） 如果将初始状态传递给商店，您如何从商店读取该状态并将其作为化简器中的第一个参数？

85 javascript  reactjs  redux 

我正在尝试React-Router（v4），但从Nav开始让Linkbe之一出现问题active。如果我单击任何Link标签，则活动的东西开始工作。但是，我希望HomeLink能够在应用启动后立即启动，因为那是在/路线上加载的组件。有什么办法吗？ 这是我当前的代码： const Router = () => ( <BrowserRouter> <div> <Nav> <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */} <Link activeClassName='is-active' to='/about'>About</Link> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss component={NoMatch} /> </div> </BrowserRouter> )

85 javascript  reactjs  ecmascript-6  react-router