Questions tagged «reactjs»

试图弄清楚如何返回上一页。我在用[react-router-v4][1] 这是我在第一个登录页面中配置的代码： <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> 为了转发到后续页面，我只需执行以下操作： this.props.history.push('/Page2'); 但是，如何返回上一页？尝试了以下一些事情，但没有运气：1。this.props.history.goBack(); 给出错误： TypeError：null不是对象（评估“ this.props”） this.context.router.goBack(); 给出错误： TypeError：null不是对象（评估“ this.context”） this.props.history.push('/'); 给出错误： TypeError：null不是对象（评估“ this.props”） Page1在下面发布代码： import React, {Component} from 'react'; import {Button} from 'react-bootstrap'; class Page1 extends Component { …

84 javascript  reactjs  react-router-v4 

我有一个功能组件，我想强迫它重新渲染。 我该怎么办？ 由于没有实例this，因此我无法致电this.forceUpdate()。

84 javascript  reactjs 

将TypeScript与React结合使用，我们不再需要扩展React.Props以使编译器知道所有react组件prop都可以有子代： interface MyProps { } class MyComponent extends React.Component<MyProps, {}> { public render(): JSX.Element { return <div>{this.props.children}</div>; } } 但是，无状态功能组件似乎并非如此： const MyStatelessComponent = (props: MyProps) => { return ( <div>{props.children}</div> ); }; 发出编译错误： 错误：（102、17）TS2339：类型“ MyProps”上不存在属性“子级”。 我猜这是因为编译器实际上没有办法知道children在props参数中将提供香草函数。 所以问题是我们应该如何在TypeScript的无状态功能组件中使用子代？ 我可以回到的旧方法MyProps extends React.Props，但是该Props接口被标记为已弃用，并且Props.ref据我所知，无状态组件不具有或不支持。 所以我可以children手动定义道具： interface MyProps { children?: React.ReactNode; } 第一：是ReactNode正确的类型吗？ 第二：我必须将子级写为可选（?），否则消费者会认为这children应该是组件（）的属性，<MyStatelessComponent children={} …

84 reactjs  typescript 

我试图在提交到github时隐藏我的API密钥，并且我在论坛中浏览了相关指南，尤其是以下文章： 如何在create-react-app中隐藏API密钥？ 我进行了更改，然后重新开始了纱线。我不确定自己在做什么错–我.env在项目的根目录（我将其命名为process.env）中添加了一个文件，并在我刚刚放入的文件中添加了一个文件REACT_APP_API_KEY = 'my-secret-api-key'。 我认为这可能是fetch在App.js中向我添加密钥的方式，并且我尝试了多种格式，包括不使用模板文字，但是我的项目仍然无法编译。 任何帮助深表感谢。 performSearch = (query = 'germany') => { fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`) .then(response => response.json()) .then(responseData => { this.setState({ results: responseData.results, loading: false }); }) .catch(error => { console.log('Error fetching and parsing data', error); }); } 运行代码段隐藏结果展开摘要

84 reactjs  environment-variables  api-key 

我正在制作并监听正常的DOMCustomEvent以便与父节点通信： 在儿童中： var moveEvent = new CustomEvent('the-graph-group-move', { detail: { nodes: this.props.nodes, x: deltaX, y: deltaY }, bubbles: true }); this.getDOMNode().dispatchEvent(moveEvent); 在父母中： componentDidMount: function () { this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup); }, 这可行，但是有一个特定于React的方法会更好吗？

84 reactjs 

我有这个组成部分： import React from 'react'; export default class AddItem extends React.Component { add() { this.props.onButtonClick(this.input.value); this.input.value = ''; } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); } } 我希望在输入值为空时禁用按钮。但是上面的代码不起作用。它说： add-item.component.js：78未捕获的TypeError：无法读取未定义的属性“值” 指向disabled={!this.input.value}。我在这里怎么做错了？我猜测render执行方法时可能尚未创建ref 。如果是，那么解决方法是什么？

84 javascript  reactjs 

未处理的拒绝（错误）：动作必须是普通对象。使用自定义中间件执行异步操作。 我想在每个帖子中添加评论。因此，当获取帖子运行时，我想为所有帖子调用获取评论API。 export function bindComments(postId) { return API.fetchComments(postId).then(comments => { return { type: BIND_COMMENTS, comments, postId } }) }

84 reactjs  react-redux 

我是ReactJS的新手。以前，我使用jQuery设置所需的任何动画或功能。但是现在我正在尝试使用ReactJS并尽量减少使用jQuery。 我的情况是： 我正在尝试使用ReactJS构建手风琴。 <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> 使用JQuery： $('.accor > .head').on('click', function(){ $('.accor > .body').slideUp(); $(this).next().slideDown(); }); 我的问题： 我该如何使用ReactJS？

84 javascript  jquery  reactjs 

我有一个如下的路由器： <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> 这是我要实现的目标： 将用户重定向到（/login如果未登录） 如果用户/login在已经登录时尝试访问，请将其重定向到root/ 所以现在我想以检查用户的状态App的componentDidMount，然后做一些事情，如： if (!user.isLoggedIn) { this.context.router.push('login') } else if(currentRoute == 'login') { this.context.router.push('/') } 这里的问题是我找不到获取当前路由的API。 我发现建议使用Router.ActiveState mixin和路由处理程序来解决此已关闭的问题，但是现在似乎已弃用了这两个解决方案。

83 javascript  reactjs  react-router 

假设我有一个包含换行符的文本字符串，我将其渲染为： render() { var text = "One\nTwo\nThree"; return <div>{text}</div>; } 在HTML中，换行符不呈现为换行符。我应该如何在React中做到这一点？我不想转换为<br>标签并使用dangerouslySetInnerHTML。还有另一种方法吗？

83 reactjs 

我看到React 16允许将属性传递给DOM。因此，这意味着可以使用“类”代替className，对吗？ 我只是想知道仍然可以使用className而不是class来实现优势，除了可以向后兼容以前的React版本。

83 reactjs 

模拟按钮单击似乎是非常简单/标准的操作。但是，我无法在Jest.js测试中使用它。 这是我尝试过的（也使用jQuery完成），但似乎没有触发任何操作： import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright button.simulate('click'); // Nothing happens

83 javascript  reactjs  testing  jestjs  enzyme 

让我解释一下此代码的结果，以便轻松询问我的问题。 const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => { const { value } = e.target; …

83 reactjs  react-hooks 

我只是做一个简单的应用程序来学习与redux异步。我已使所有工作正常进行，现在我只想在网页上显示实际状态。现在，我实际上如何在render方法中访问商店的状态？ 这是我的代码（所有内容都在一页中，因为我只是在学习）： const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { …

83 javascript  asynchronous  reactjs  redux  react-redux 

处理样式化组件中悬停的最佳方法是什么？我有一个包装元素，将鼠标悬停时会显示一个按钮。 我可以在组件上实现某些状态并在悬停时切换属性，但是想知道是否有更好的方法可以使用styled-cmponents来实现。 如下所示的方法不起作用，但很理想： const Wrapper = styled.div` border-radius: 0.25rem; overflow: hidden; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25); &:not(:last-child) { margin-bottom: 2rem; } &:hover { .button { display: none; } } `

83 reactjs  styled-components