Questions tagged «reactjs»

我对这些概念有些模糊，如果我完全在AngularJS和ReactJS中构建相同的ToDo应用程序，那么，什么使React ToDo使用单向数据绑定而不是AngularJS的双向数据绑定？ 我了解React之类的作品 渲染（数据）---> UI。 这与Angular有何不同？

109 javascript  angularjs  reactjs 

我正在使用reactjs，并且在尝试显示JSON数据（来自文件或服务器）时似乎无法阻止此错误： Uncaught TypeError: this.props.data.map is not a function 我看了看： 反应代码抛出“ TypeError：this.props.data.map不是函数” React.js this.props.data.map（）不是函数 这些都没有帮助我解决问题。页面加载后，我可以验证this.data.props是否未定义（并且确实具有与JSON对象等效的值-可以使用调用window.foo），因此当它被调用时，似乎没有及时加载对话列表。如何确保该map方法适用于JSON数据而不是undefined变量？ var converter = new Showdown.converter(); var Conversation = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="conversation panel panel-default"> <div className="panel-heading"> <h3 className="panel-title"> {this.props.id} {this.props.last_message_snippet} {this.props.other_user_id} </h3> </div> <div className="panel-body"> <span dangerouslySetInnerHTML={{__html: rawMarkup}} …

109 javascript  ajax  json  reactjs 

我写了几十个React文件，从不使用componentDidUpdate方法。 是否存在何时需要使用此方法的典型示例？ 我想要一些真实的例子，而不是简单的演示。 感谢你的回答！

109 reactjs 

我正在尝试制作一个不错的ApiWrapper组件，以填充各种子组件中的数据。从我阅读的所有内容来看，这应该可以正常工作：https : //jsfiddle.net/vinniejames/m1mesp6z/1/ class ApiWrapper extends React.Component { constructor(props) { super(props); this.state = { response: { "title": 'nothing fetched yet' } }; } componentDidMount() { this._makeApiCall(this.props.endpoint); } _makeApiCall(endpoint) { fetch(endpoint).then(function(response) { this.setState({ response: response }); }.bind(this)) } render() { return <Child data = { this.state.response } />; } } class …

109 reactjs 

我在React教程上阅读了这一内容。这是什么意思？ React是安全的。我们不会生成HTML字符串，因此XSS保护是默认设置。 如果React安全，XSS攻击如何工作？如何实现这种安全性？

109 reactjs  security  xss 

我是编程的新手，如果我阅读了官方文档，这会使我很难理解。 我从这里阅读有关React Router 4的信息 在本文中，作者正在谈论<HashRouter>和<BrowserRouter> 这就是他提到的 HashRouter基本上使用URL中的哈希来呈现组件。由于我正在构建一个静态的单页网站，因此需要使用它。 BrowserRouter，它使用HTML5历史记录API呈现组件。可以通过pushState和replaceState修改历史记录。更多信息可以在这里找到 现在，我都没有这两者的意义和用例，就像他说可以通过pushState和replaceState修改历史记录并使用URL中的哈希值来呈现组件的历史记录时的意思一样。 虽然对BrowserRouter的第一种解释对我来说完全是模糊的，但对HashRouter的第二种解释也没有意义，例如为什么有人在URL中使用Hash（＃）来呈现组件？

109 reactjs 

我在上下文中有如下语言设置 class LanguageProvider extends Component { static childContextTypes = { langConfig: PropTypes.object, }; getChildContext() { return { langConfig: 'en' }; } render() { return this.props.children; } } export default LanguageProvider; 我的应用程序代码如下所示 <LanguageProvider> <App> <MyPage /> </App> </LanguageProvider> 我的页面具有切换语言的组件 <MyPage> <LanguageSwitcher/> </MyPage> LanguageSwitcher 在这种MyPage情况下，需要更新上下文以将语言更改为“ jp”，如下所示 class LanguageSwitcher extends Component { static …

109 javascript  reactjs  react-context 

我期望状态在道具更改时重新加载，但这不起作用，并且user变量在下次useState调用时不会更新，这是怎么回事？ function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } 码笔

109 reactjs  react-hooks 

我一直在想，我对客户端和服务器之间的路由感到困惑。假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端渲染，并使用react-router作为客户端路由在页面之间切换而不刷新为SPA。 我想到的是： 路线如何解释？例如，从首页（/home）到帖子页面（/posts）的请求 路由在服务器端还是客户端去哪里？ 它如何知道如何处理？

108 javascript  reactjs  routes  react-router  url-routing 

我的反应webApp在浏览器控制台中给出此错误 Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 也： Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note …

108 javascript  reactjs  webpack 

我有时看到人们在withRouter导出组件时将它们包装起来： import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); 这是做什么用的，什么时候应该使用？

108 reactjs  react-router 

我有一个React组件，在该组件的render方法内部，我有这样的东西： render() { return ( <div> <div> // removed for brevity </div> { switch(...) {} } <div> // removed for brevity </div> </div> ); } 现在的要点是，我有两个固定的div元素，一个在顶部，一个在底部。在中间，我想有一个switch语句，根据状态下的值，我想渲染一个不同的组件。因此，基本上，我希望两个div元素始终固定，并且每次都在中间以呈现不同的组件。我正在使用它来实现多步付款程序）。但是，正如当前的代码一样，它不起作用，因为它给了我一个错误，说这switch是意外的。有什么想法可以实现我想要的吗？

108 reactjs 

使用建议的方法： 这是结果：按钮中的链接， 注释行之间的代码 我想知道是否有一种方法可以使用react在HTML标签中包装Link元素。'react-router'button 我目前有一些Link组件可以在我的应用程序中导航页面，但是我想将该功能映射到我的HTML按钮。

108 html  reactjs  button  hyperlink  router 

有没有办法知道浏览器中React的运行时版本？

107 javascript  reactjs 

已关闭。这个问题需要更加集中。它当前不接受答案。 想改善这个问题吗？更新问题，使其仅通过编辑此帖子来关注一个问题。 3年前关闭。 改善这个问题 我是React / Redux的新手。我在Redux应用程序中使用fetch api中间件来处理API。它是（redux-api-middleware）。我认为这是处理异步api动作的好方法。但是我发现有些情况我自己无法解决。 如首页（Lifecycle）所述，获取API的生命周期始于调度CALL_API操作，然后终止于调度FSA操作。 所以我的第一种情况是在获取API时显示/隐藏预加载器。中间件将在开始时调度FSA动作，在结束时调度FSA动作。这两个动作均由减速器接收，该减速器仅应执行一些正常的数据处理。没有UI操作，没有更多操作。也许我应该将处理状态保存为状态，然后在商店更新时呈现它们。 但是该怎么做呢？一个React组件流遍及整个页面吗？通过其他操作更新商店会发生什么？我的意思是，他们更像是事件而不是状态！ 更糟糕的是，当我必须在Redux / React应用程序中使用本机确认对话框或警报对话框时，该怎么办？应该将它们放在哪里，采取什么行动或减少压力？ 最好的祝愿！希望得到答复。

107 javascript  reactjs  redux