Questions tagged «reactjs»

我想使用React在整个DOM中多次添加组件。这个小提琴显示了我要执行的操作，并且不会引发任何错误。这是代码： HTML： <div id="container"> <!-- This element's contents will be replaced with the first component. --> </div> <div id="second-container"> <!-- This element's contents will be replaced with the second component. --> </div> JS： var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container')); React.render(<Hello …

107 reactjs 

我有一个连接的简单React组件（映射了一个简单的数组/状态）。为了避免引用商店的上下文，我想一种直接从道具中获取“派遣”的方法。我见过其他人正在使用这种方法，但是由于某些原因无法使用它：) 这是我当前使用的每个npm依赖项的版本 "react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" 这是带有连接方法的组件 class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button> </div> ); } }; function mapStateToProps(state) { return { people: …

107 javascript  reactjs  redux 

当我这样写webpack.config.js时 module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 在index.jsx我导入一个react模块App import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( …

107 reactjs  webpack  webpack-dev-server 

我想为我的React应用程序设置文档标题（在浏览器标题栏中）。我已经尝试使用反应文档标题（似乎过时了），并设置document.title在constructor与componentDidMount()这些解决方案的工作- 。

107 javascript  reactjs  dom 

我有一个要通过REACT输出的对象 question = { text: "Is this a good question?", answers: [ "Yes", "No", "I don't know" ] } 而我的react组件（已减少）是另一个组件 class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.forEach(answer => { console.log("Entered"); //This does ifre <Answer answer={answer} /> //THIS DOES NOT WORK })} } export default QuestionSet; 从上面的代码片段中可以看到，我正在尝试通过在props中使用数组Answers来插入组件Answer的数组，它确实有效，但不会输出到HTML中。

107 reactjs  react-props 

我正在尝试新的React Hooks，并且有一个带有计数器的Clock组件，该计数器应该每秒增加一次。但是，该值不会增加到超过一。 function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> 运行代码段隐藏结果展开摘要

107 javascript  reactjs  react-hooks 

是否可以componentDidMount通过钩子在React功能组件中进行仿真？

107 javascript  reactjs  react-hooks 

我遇到一个问题，即状态的重新呈现会导致ui问题，并建议仅更新我的reducer内部的特定值以减少页面上的重新呈现量。 这是我的状态的例子 { name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some other title", text: "some other text"} ] } 我目前正在这样更新 case 'SOME_ACTION': return { ...state, contents: action.payload } 其中action.payload是包含新值的整个数组。但是现在我实际上只需要更新内容数组中第二个项目的文本，这样的事情就不起作用 case 'SOME_ACTION': return { ...state, contents[1].text: action.payload } action.payload现在我需要更新的文本在哪里。

106 javascript  reactjs  redux 

我i18n在一个组件（在应用程序中加载的第一个组件）中初始化了翻译对象。所有其他组件都需要相同的对象。我不想在每个组件中重新初始化它。怎么回事？使它可用于窗口范围并没有帮助，因为我需要在render()方法中使用它。 请提出针对这些问题的通用解决方案，而不是针对国际化的解决方案。

106 reactjs  javascript-globalize 

根据文档： componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。 我们可以使用新的useEffect()钩子来模拟componentDidUpdate()，但似乎useEffect()在每次渲染后都被运行，即使是第一次也是如此。如何使它不在初始渲染上运行？ 如您在下面的示例中看到的那样，它componentDidUpdateFunction是在初始渲染期间打印的，但componentDidUpdateClass在初始渲染期间没有打印的。 function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { super(props); this.state = { count: …

106 javascript  reactjs  react-hooks 

我有一个针对客户的减速器，另一个针对AppToolbar的减速器，还有一些其他的减速器... 现在让我们说我创建了一个删除客户端的提取操作，如果失败，我在Clients reducer中会有代码，该代码应该做一些事情，但是我也想在AppToolbar中显示一些全局错误。 但是客户端和AppToolbar减速器不共享状态的同一部分，因此我无法在减速器中创建新的动作。 那么我应该如何显示全局错误？谢谢 更新1： 我忘了提到我使用este devstack 更新2： 我将Eric的答案标记为正确，但是我不得不说，我在este中使用的解决方案更像是Eric和Dan的答案的结合……您只需要找到最适合自己代码的方法即可。 。

105 javascript  reactjs  redux 

我正在渲染帖子列表。对于每个帖子，我都希望呈现一个带有帖子ID的锚标记，作为href字符串的一部分。 render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); 我该如何做才能使每个帖子都具有href的/posts/1，/posts/2等等？

105 javascript  reactjs 

这是我的情况： 在this.handleFormSubmit（）上，我正在执行this.setState（） 在this.handleFormSubmit（）内部，我正在调用this.findRoutes（）; -这取决于this.setState（）的成功完成 this.setState（）; 在this.findRoutes被调用之前没有完成... 在调用this.findRoutes（）之前，如何等待this.handleFormSubmit（）内部的this.setState（）完成？ 较差的解决方案： 将this.findRoutes（）放入componentDidUpdate（） 这是不可接受的，因为将有更多与findRoutes（）函数无关的状态更改。我不希望在不相关的状态更新时触发findRoutes（）函数。 请参见下面的代码段： handleFormSubmit: function(input){ // Form Input this.setState({ originId: input.originId, destinationId: input.destinationId, radius: input.radius, search: input.search }) this.findRoutes(); }, handleMapRender: function(map){ // Intialized Google Map directionsDisplay = new google.maps.DirectionsRenderer(); directionsService = new google.maps.DirectionsService(); this.setState({map: map}); placesService = new google.maps.places.PlacesService(map); directionsDisplay.setMap(map); }, …

105 javascript  reactjs  state 

该npm run eject命令做什么？我确实了解其他命令的功能，例如启动，构建，测试。但是不知道弹出。

105 reactjs  webpack  create-react-app  react-scripts 

有什么方法可以防止/#/使用react-router时在浏览器的地址栏中显示？那就是ReactJS。即，单击链接以转到新路线将显示localhost:3000/#/或 localhost:3000/#/about。取决于路线。

103 reactjs  react-router