草庐IT

react-dom-server

全部标签

javascript - 如何以编程方式更改 React 上下文?

我正在尝试使用新的React上下文来保存有关已登录用户的数据。为此,我在名为LoggedUserContext.js:的文件中创建了一个上下文importReactfrom'react';exportconstLoggedUserContext=React.createContext();果然,现在我可以使用消费者访问其他组件中的所述上下文,例如我在此处所做的:{user=>((LoggedUserContext.name)?LoggedUserContext.name:'Chooseauserorcreateone';)}但很明显,为了让这个系统有用,我需要在登录后修改我的上下文,以

javascript - react Hook : accessing state across functions without changing event handler function references

在基于类的React组件中,我执行如下操作:classSomeComponentextendsReact.Component{onChange(ev){this.setState({text:ev.currentValue.text});}transformText(){returnthis.state.text.toUpperCase();}render(){return();}}为了简化我的观点,这是一个人为的例子。我本质上想要做的是保持对onChange函数的持续引用。在上面的例子中,当React重新渲染我的组件时,如果输入值没有改变,它不会重新渲染输入。这里要注意的重要事项:t

javascript - 在 Electron 中提供静态文件(React 应用程序)

我正在做一个项目,我需要在Electron中构建一个桌面应用程序。大多数功能将在React中构建,但有一部分我们需要集成第3方静态HTML杂志。我需要一些关于如何做到这一点的建议。我目前正在构建一个概念验证应用程序,并且基于此https://github.com/chentsulin/electron-react-boilerplate我如何将其添加到/static/我服务器静态HTML文件。我知道我可以在express中做到这一点,但我真的不想包含整个express框架只是为了提供静态文件。我在看这个https://www.npmjs.com/package/serve-static

javascript - WebKit 未捕获错误 : INVALID_STATE_ERR: DOM Exception 11

我有这段代码,在Firefox中运行良好,但在Chrome中我遇到了这个错误:"UncaughtError:INVALID_STATE_ERR:DOMException11"atsprites.js:36在那一行是这段代码:context.drawImage(Context是一个全局变量,其中包含Canvas的二维上下文。这是完整的代码:index.htmlSprite.jsfunctionSpritePrototype(frames,width,height,type){this.frames=frames;this.type=type;if(this.frames>0){this.

javascript - JS : React and global namespace pollution

我正在考虑在一个新网站中使用React,但我仍然想知道如何使用React组件处理全局命名空间。例如,如果我像这样定义几个React组件:varMySlider=React.createClass({//snip});varMyAlert=React.createClass({//snip});varMyDropdown=React.createClass({//snip});渲染一个组件看起来像这样:React.renderComponent(,document.getElementById('content'));但是,我更愿意为我的组件命名空间以避免污染全局命名空间。varName

javascript - 如何在 Electron 中访问 <webview> 的 DOM?

我刚刚开始使用Electron,之前使用过node-webkit(nw.js)。在nw.js中,我能够创建iframe,然后访问所述iframe的DOM,以获取标题、网站图标等内容。几天前当我选择Electron将我的nw.js应用程序移植到它时,我看到了使用webview而不是iframe的建议,仅仅是因为它们更好。现在,我上面提到的功能在nw.js中相对容易实现,但我不知道如何在Electron中实现(而且示例很少甚至没有)。谁能帮忙?另外,我的webview有后退/前进按钮(我打算有多个)。我在文档中看到我可以在webview上调用函数来执行此操作,但我尝试过的任何方法都不起作用

javascript - 商店状态更改时 React 组件不更新

下面是我的组件类。该组件似乎永远不会执行componentWillUpdate(),即使我可以在mapStateToProps返回之前通过记录看到状态更新。状态100%发生变化,但组件不会刷新。importReact,{Component}from'react'import{connect}from'react-redux'import{search}from'./mapActions'importLfrom'leaflet'classMapextendsComponent{componentDidMount(){L.Icon.Default.imagePath='./images't

javascript - 如何在没有 JSX 的情况下在 React.js 中呈现 html 实体

ReactDOM.render(React.createElement("button",{"type":"button","className":"close"},"×"),document.getElementById('container'));打印“&次;”而不是×我能够通过使用dangerouslySetInnerHTML修复它,但正如名称所述,我认为dangerously不是最好的解决方案ReactDOM.render(React.createElement("button",{"type":"button","className":"close","dange

javascript - react : Nested onclick also triggers parent

我使用slickcarousel的react版本制作了一个类似Netflix的carousel。您可以单击一个图block,然后该图block会展开以显示该图block的详细信息。例子:这要归功于Slicks处理动态高度的能力。我想在扩展部分添加一个关闭按钮(如最右侧所示)。但这就是我遇到的问题。如果我添加一个带有onClick处理程序的关闭按钮,它将始终触发显示展开部分的父级Onclick。showExpandedonclick函数只是设置一个showDetails状态。所以我的问题是:如何通过单击关闭按钮来设置状态,而不同时触发包装父级。我尝试了event.preventDefau

javascript - React-Apollo,不要在组件加载时运行查询

我正在使用很棒的https://github.com/apollographql/react-apollo库,我正在尝试查看是否有比我现在做的更好的约定来将数据加载到组件中。我已经将我的组件设置为使用apolloHOC将数据加载到我的组件中,如下所示:constmainQuery=gql`querycurrentProfileData($userId:String,$communityId:String!){created:communities(id:$communityId){opportunities{submittedDateapprovalDatestatusopportun