Questions tagged «reactjs»

我正在React中调试ES6语法，并编写如下组件： export default class Loginform extends React.Component { getInitialState() { return { name: '', password: '' }; }; } 但是浏览器使我警惕： 警告：getInitialState是在Loginform（普通的JavaScript类）上定义的。仅使用React.createClass创建的类支持此功能。您是要定义状态属性吗？ 我可以使用传统语法来处理它，var Loginform = React.createClass但是正确的ES6语法是什么？ 另一件事，我认为传统语法React.createClass是一个对象，因此其中的功能由逗号分隔，但是对于extends需要分号的类，我不太了解。

77 reactjs 

componentDidMount(prevProps, prevState, prevContext) { let [audioNode, songLen] = [this.refs.audio, List.length-1]; audioNode.addEventListener('ended', () => { this._endedPlay(songLen, () => { this._currSong(this.state.songIndex); this._Play(audioNode); }); }); audioNode.addEventListener('timeupdate', () => { let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = []; if(!isNaN(audioNode.duration)) { remainTime = audioNode.duration - audioNode.currentTime; remainTimeMin = parseInt(remainTime/60); // 剩余分 remainTimeSec = parseInt(remainTime%60); // 剩余秒 …

77 reactjs 

如何导出无状态的纯哑组件？ 如果我使用类，则可以： import React, { Component } from 'react'; export default class Header extends Component { render(){ return <pre>Header</pre> } } 但是，如果我使用纯函数，则无法正常工作。 import React, { Component } from 'react'; export default const Header = () => { return <pre>Header</pre> } 我缺少基本的东西吗？

77 javascript  reactjs  ecmascript-6  export 

我开始用崇高的文字编写一些基本的React代码。这是我的语法高亮显示的样子。其部分突出。有什么建议的Sublime插件可以用来查看完整的语法突出显示吗？ import React, { Component } from 'react' import { connect } from 'react-redux' // <-- is the glue between react and redux import { bindActionCreators } from 'redux' import { selectBook } from '../actions/index' // there is no intrinsic connection between React and Redux // they are two seperate …

77 javascript  reactjs  sublimetext3  syntax-highlighting 

我不太了解React Material-UI网格系统。如果我想使用表单组件进行登录，最简单的方法是在所有设备（移动设备和台式机）的屏幕上居中显示它？

77 reactjs  mobile  login  material-ui  desktop 

我想呈现<select>输入的HTML5属性，以便可以将jquery图像选择器与react一起使用。我的代码是： var Book = React.createClass({ render: function() { return ( <option data-img-src="{this.props.imageUrl}" value="1">{this.props.title}</option> 问题是即使{this.props.imageUrl}正确地以a形式传递prop，它也不会在HTML中呈现-只是呈现为{this.props.imageUrl}。如何使变量正确传递到HTML？

77 reactjs 

我正在尝试使用组件接收的道具使用React hook setState（）设置状态。我尝试使用以下代码： import React,{useState , useEffect} from 'react'; const Persons = (props) => { // console.log(props.name); const [nameState , setNameState] = useState(props) console.log(nameState.name); console.log(props.name); return ( <div> <p>My name is {props.name} and my age is {props.age}</p> <p>My profession is {props.profession}</p> </div> ) } export default Persons; 问题在于加载组件时正在设置状态。但是，当它收到新的道具时，状态不会更新。在这种情况下如何更新状态？提前致谢。

77 reactjs  react-hooks 

我正在学习有关如何使用钩子注册事件的Udemy课程，讲师给出了以下代码： const [userText, setUserText] = useState(''); const handleUserKeyPress = event => { const { key, keyCode } = event; if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) { setUserText(`${userText}${key}`); } }; useEffect(() => { window.addEventListener('keydown', handleUserKeyPress); return () => { window.removeEventListener('keydown', handleUserKeyPress); }; }); return ( …

77 javascript  reactjs  react-native  react-hooks 

据我了解，我可以将refs用于单个元素，如下所示： const { useRef, useState, useEffect } = React; const App = () => { const elRef = useRef(); const [elWidth, setElWidth] = useState(); useEffect(() => { setElWidth(elRef.current.offsetWidth); }, []); return ( <div> <div ref={elRef} style={{ width: "100px" }}> Width is: {elWidth} </div> </div> ); }; ReactDOM.render( <App />, document.getElementById("root") …

77 javascript  reactjs  react-hooks 

我们提供了讲座和章节的列表，用户可以在其中选择和取消选择它们。这两个列表存储在redux存储中。现在，我们希望在url的hash标签中保留选定的演讲段和章节段的表示形式，并且对该URL所做的任何更改也应更改存储（双向同步）。 使用react-router甚至react-router-redux的最佳解决方案是什么？ 我们真的找不到一些很好的示例，其中react路由器仅用于维护url的hash标签，并且仅更新一个组件。

76 javascript  reactjs  react-router  redux  react-router-redux 

我目前正在尝试概念化如何在另一个组件中进行分派之后根据数据更改来处理一个组件中的动作。 采取这种情况： dispatch(someAjax) ->状态更新中的属性。 之后，我需要另一个依赖于此相同属性的组件来知道已更新该组件，并根据新值调度一个动作。 除了使用某种类型的value.on(change...解决方案之外，处理此类动作“级联”的首选方法是什么？

76 reactjs  redux  redux-thunk 

我一直在尝试找出如何通过React和Webpack动态添加图像。我在src / images下有一个图像文件夹， 在src / components / index下有一个组件。我正在将url-loader与以下配置用于webpack { test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 在组件内，我知道可以在创建组件之前在文件顶部为特定图像添加require（image_path），但我想使该组件通用，并使其具有一个属性，该属性具有从中传递的图像的路径父组件。 我试过的是： <img src={require(this.props.img)} /> 对于实际属性，我尝试了几乎所有可以想到的从项目根目录，反应应用程序根目录以及组件本身到图像的路径。 文件系统 |-- src | ` app.js | `--images | ` image.jpg | ` image.jpg | `-- components | `parent_component.js | `child_component.js 父组件基本上只是一个容器，用于容纳子组件的倍数。 <ChildComponent img=data.img1 /> <ChildComponent img=data.img2 /> etc.... 有什么方法可以使用带有URL-loader的react和webpack来执行此操作，还是我走了一条错误的道路来实现这一目标？

76 reactjs  webpack  image-loading  urlloader 

尝试做一些我想会很简单的事情。我想导入一个现有的JavaScript库，然后调用它的函数。因此，例如，我想导入blah.js，然后调用blah（）。 import React from 'react'; import {blah} from 'blah/js/blah.js'; class MyClass extends React.Component { constructor() { super(); } componentDidMount() { window.addEventListener('resize', this.handleResize); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); } handleResize() { blah.blah(); } render() { .... } } export default MyClass; 只是想知道要完成这项工作我需要做什么神奇的组合。也许我只是错过了重点。该示例给出错误“ TypeError：_blah.blah未定义”。

76 reactjs  ecmascript-6  webpack 

如何在React Native中仅对1个角使用边界半径？ 我有一个模态窗口 如您所见，下角没有圆角，当我使用backgroundColor作为按钮时会发生这种情况。我试图将隐藏的溢出设置为模式包装器，但这对我没有帮助。现在，我想对按钮使用边框半径（仅适用于1个角）。 我的代码http://jsbin.com/sexeputuqe/edit?html,css

76 javascript  reactjs  react-native 

PropTypes.objectOf和之间有什么区别PropTypes.shape？在文档中： // An object with property values of a certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number) 与 // An object taking on a particular shape optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }) 什么objectOf时候应该使用shape？什么时候应该使用？

76 reactjs  react-proptypes