Questions tagged «reactjs»

有什么方法可以在Visual Studio Code中使用组件或HTML补全吗？因为当我们有类似Bootstrap等的类时，手动键入每个字母不是一个好主意。例如Emmet中的完成：ul>li*2>a var React = require('react'); var Header = React.createClass({ render: function () { return ( <nav className="navbar navbar-defaullt"> <div className="container-fluid"> <a href="/" className="navbar-brand"> <img width="50" height="50" src="images/logo.png" alt="logo" /> </a> <ul className="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/#about">About</a></li> </ul> </div> </nav> ); } }); module.exports = Header;

78 reactjs  autocomplete  visual-studio-code  jsx  emmet 

我正在将样式加载器与webpack和react框架一起使用。当我在终端中运行webpack时，Module not found: Error: Cannot resolve module 'style-loader'尽管我已经正确指定了文件路径，但我仍然要导入import.js文件。 import '../css/style.css'; import React from 'react'; import ReactDOM from 'react-dom'; import jQuery from 'jquery'; import TopicsList from '../components/topic-list.jsx'; import Layout from '../components/layout.jsx'; webpack.config.js： var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'build'); var APP_DIR = path.resolve(__dirname, 'build'); module.exports …

78 javascript  reactjs  webpack  webpack-style-loader 

我正在Image用flexbox设置组件的样式，使其位于屏幕中央，效果很好。现在，我希望第二个Image组件直接显示在第一个组件的顶部。第二个图像使用绝对定位。目前，我只是在猜测像素是否适合它，但是当然这是不准确的，并且在可维护性方面付出了太多努力。 我正在寻找与jQuery等效的React Native .offset()。有这样的事情吗？如果没有，实现这一目标的最佳方法是什么？

78 javascript  ios  reactjs  react-native 

使用useState挂钩时出现此错误。我有它的基本形式，正在看react docs作为参考，但是仍然出现此错误。我已经准备好面对手掌的时刻... export function Header() { const [count, setCount] = useState(0) return <span>header</span> }

78 javascript  reactjs  react-hooks 

我了解React教程和文档会发出警告 毫无疑问地说，状态不应该直接变异，所有事情都应该通过setState。 我想了解为什么，我不能直接更改状态，然后（在同一函数中）调用 this.setState({})仅来触发它render。 例如：以下代码似乎正常工作： const React = require('react'); const App = React.createClass({ getInitialState: function() { return { some: { rather: { deeply: { embedded: { stuff: 1 }}}}}; }, updateCounter: function () { this.state.some.rather.deeply.embedded.stuff++; this.setState({}); // just to trigger the render ... }, render: function() { return ( <div> …

78 javascript  reactjs 

我有这个反应 export function fetchPosts() { const request = axios.get(`${WORDPRESS_URL}`); return { type: FETCH_POSTS, payload: request } } 在这种情况下，如何测试axios？开玩笑说，在那个网站上有一个异步代码的用例，他们使用了一个模拟函数，但是我不知道我是否可以用axios做到这一点？参考：https : //facebook.github.io/jest/docs/tutorial-async.html 到目前为止，我已经测试了它是否返回了正确的类型 it('should dispatch actions with the correct type', () => { store.dispatch(fetchPosts()); let action = store.getActions(); expect(action[0].type).toBe(FETCH_POSTS); }); 我不知道如何传递模拟数据并测试它是否返回，但是有人有任何想法吗？ 先感谢您

78 javascript  reactjs  react-redux  jestjs 

我正在尝试做npm install，出现错误： Failed at the node-sass@4.5.0 postinstall script. 我试图删除node_modules然后重新安装它，出现同样的错误。解决办法是什么？ 节点v8.9.3 npm v5.4.2 ionic 3.19.0

78 angular  reactjs  npm  ionic3  node-sass 

在React功能组件中，这是使用Component.defaultProps或在函数定义上使用默认参数来设置默认属性的更好方法，例如： 默认道具： const Component = ({ prop1, prop2 }) => ( <div></div> ) Component.defaultProps = { prop1: false, prop2: 'My Prop', } 默认参数： const Component = ({ prop1 = false, prop2 = 'My Prop' }) => ( <div></div> )

78 javascript  reactjs  ecmascript-6 

我的index.js中有以下代码段 class App extends Component { render() { return ( <div style = { styles.app } > Welcome to React! </div> ) } } 该代码有效，但是每次我保存（ctrl + s）visual studio格式的jsx时，就像这样： class App extends Component { render() { return ( < div style = { styles.app } > Welcome to React! < /div> …

78 reactjs  visual-studio-code  jsx 

在我的React容器/组件中，我可以使用哪种类型来引用matchReact Router DOM包含的部分？ interface Props { match: any // <= What could I use here instead of any? } export class ProductContainer extends React.Component<Props> { // ... }

78 reactjs  typescript  react-router 

我父母的渲染中有以下代码 <div> { this.state.OSMData.map(function(item, index) { return <Chart key={index} feature={item} ref="charts" /> }) } </div> 以及下面我孩子图表中的代码 <div className="all-charts"> <ChartistGraph data={chartData} type="Line" options={options} /> </div> 我以为父级的componentDidMount仅在加载所有子级后才被调用。但是这里，父级的componentDidMount在子级的componentDidMount之前被调用。 这是工作方式吗？还是我做错了什么。 如果这是工作方式，我如何检测从父级加载所有子级组件的时间？

77 javascript  reactjs 

我正在我的应用程序中使用React / JSX来完成我想要的，Lodash。 我需要根据条件重复元素一定次数。我该怎么办？ 这是元素： <span className="busterCards">♦</span>; 我将其分配为： let card; if (data.hand === '8 or more cards') { card = <span className='busterCards'>♦</span>; } 因此，在这种情况下，我需要重复元素8时间。使用Lodash的程序应该是什么？

77 javascript  reactjs  lodash 

我希望创建一个无状态组件，其input元素可以由父组件验证。 在下面的示例中，我遇到了一个问题，即输入ref从未分配给父级的私有_emailAddress属性。 何时handleSubmit调用，this._emailAddress是undefined。是否有我缺少的东西，或者有更好的方法来做到这一点？ interface FormTestState { errors: string; } class FormTest extends React.Component<void, FormTestState> { componentWillMount() { this.setState({ errors: '' }); } render(): JSX.Element { return ( <main role='main' className='about_us'> <form onSubmit={this._handleSubmit.bind(this)}> <TextInput label='email' inputName='txtInput' ariaLabel='email' validation={this.state.errors} ref={r => this._emailAddress = r} /> <button type='submit'>submit</button> </form> </main> ); } private …

77 reactjs  typescript  jsx 

我有一个表单，我想在其中处理文本输入的更改事件，但是React onChange在按下键时触发（与本机JS相反，当输入字段失焦时会触发更改事件）。 有React方式来做我想要的吗？

77 javascript  reactjs 

我正在尝试在示例应用程序中设置react-router，但出现以下错误： You should not use <Link> outside a <Router> 我的应用程序设置如下： 父组件 const router = ( <div className="sans-serif"> <Router histpry={browserHistory}> <Route path="/" component={Main}> <IndexRoute component={PhotoGrid}></IndexRoute> <Route path="/view/:postId" component={Single}></Route> </Route> </Router> </div> ); render(<Main />, document.getElementById('root')); 子/Main组件 export default () => ( <div> <h1> <Link to="/">Redux example</Link> </h1> </div> ) 知道我在做什么错吗？ 这是一个沙盒链接来演示该问题。

77 reactjs  react-router  jsx