草庐IT

react-360

全部标签

javascript - 为什么我的函数在 React 中被调用两次?

我觉得这可能是因为我正在做一些样式设置来更改我的单选按钮,但我不确定。我正在设置一个调用我的函数两次的onClick事件。我已删除它以确保它不会在其他地方被触发,而onClick似乎是罪魁祸首。this.changeShipping({[k]:i})}>{shipOption.carrier?shipOption.carrier.serviceType:null}{''}{shipOption.name}${shipOption.amount}this.setState({shippingOption:{...this.state.shippingOption,[k]:i}})}che

javascript - 在 React 样式组件上使用 'ref' 不起作用

我在使用带样式组件的ref时遇到困难。当我尝试像下面这样在我的类方法中访问它们时,出现以下错误:Edit.js:42UncaughtTypeError:this.....containsisnotafunctionconstructor(props){....this.setWrapperRef=this.setWrapperRef.bind(this);this.handleClickOutside=this.handleClickOutside.bind(this);}----------setWrapperRef=(node)=>{this.wrapperRef=node;}ha

javascript - 无法使用 webpack 和 redux-react 获取模拟

我有以下设置。我现在正在尝试模拟我的后端。我有一个如下所示的异步redux操作:import*astypesfrom'./../constants/actionTypes.jsx'importfetchfrom'isomorphic-fetch'varfetchMock=require('fetch-mock');exportfunctionfetchEntry(entry){returndispatch=>{dispatch(requestEntry(entry));fetchMock.mock(`http://localhost:8080/entry/${entry}`,{cont

javascript - React 如何在 componentWillUnmount 中正确移除监听器,为什么我需要在构造函数中绑定(bind)?

我有点困惑,这个sintax有什么区别:constructor(props){super(props);this.state={openPane:false}this.togglePaneHelper=this.togglePaneHelper.bind(this);}componentDidMount(){document.body.addEventListener('click',this.togglePaneHelper);}componentWillUnmount(){document.body.removeEventListener('click',this.togglePa

javascript - React 组件等待所需的 Prop 呈现

我在父组件内部声明一个组件。我想在一个文件中建立特定的Prop,然后在父组件中,我希望能够同时为子组件建立其他Prop(因为它们是共享属性......在大多数情况下)。我的问题是子组件尝试渲染并失败,因为一开始没有建立所需的Prop类型。有没有办法告诉子组件等待所需的Prop渲染?在ParentComponent渲染函数中,我调用另一个函数来运行React.Children.map()并将Prop附加到ChildComponent。呈现子组件的(粗略)部分: 最佳答案 您可以使用conditionalrenderstatement仅

javascript - 多语言 react webapp 的最佳方法

我们希望将主站点的后台作为用户的多语言解决方案。我们已经决定为此使用React+Redux,因为将已经部署的API用于授权和数据获取等多种功能非常有意义。我过去使用过自定义方法,但它太复杂了,也许我们在这里缺少最佳实践方法。主站点已经支持4种语言,并且很快就会支持其他语言。我查看了一些正在进行的库,例如React-intl(https://github.com/yahoo/react-intl)和AirbnbPolyglot(http://airbnb.io/polyglot.js/)在React中构建多语言站点的最佳方法/库/解决方案是什么?(只是在前端,而不是同构应用程序)

javascript - react 路由器链接; activeClassName 不工作

我有一个导航组件,它呈现每个导航链接。这个组件的返回看起来像这样:return({el.title}{subNav});事件类仅在页面刷新时设置。单击链接时,事件指示器停留在初始链接处。我没有使用Redux,所以它似乎与这个问题无关:activeClassNamedoesnotworkonthesideMenuwhenclickingonthelink我的路线是这样的:使用React-Router2.8.1和browserHistory 最佳答案 说明使用而不是并添加exact作为属性包括exact作为属性(property)确保a

javascript - 以 React 方式在 HTML 中包装多个字符串

我正在构建一个实体荧光笔,这样我就可以上传一个文本文件,在屏幕上查看内容,然后突出显示数组中的单词。这是数组由用户在手动突出显示选择时填充,例如...constentities=['JohnSmith','Apple','someotherword'];这是我在屏幕上显示的文本文档。它包含很多文本,其中一些文本需要在用户手动突出显示某些文本后在视觉上突出显示,例如名称JohnSmith、Apple和其他一些词现在我想通过将实体包装在一些标记中来直观地突出显示文本中实体的所有实例,并且做这样的事情非常有效:getFormattedText(){constparagraphs=this.p

javascript - 不要直接改变状态。使用 setState() react/no-direct-mutation-state

我有这个代码:constructor(props){super(props)this.state={loginButton:'',benchmarkList:''}if(props.username==null){this.state.loginButton=}else{}}它给我一个ESLint警告:Donotmutatestatedirectly.UsesetState()react/no-direct-mutation-state.现在我该怎么办,因为我不能在constructor中直接使用setState,因为它会创建error像这样更新会给我错误。

javascript - 如何在 React 中渲染 HOC

我正在尝试使用React渲染HOC,但我不知道如何让它工作。所以我有一个HOC可以完美地与react-navigation配合使用。我的想法是展示一个渲染器包装了一个HOC的组件。我正在尝试这样做:render(){return({CheckLogin(Login)});}这个CheckLogin是HOC,而Login是组件本身。结果是React没有提示,而是一片空白。知道如何渲染调用组件本身的HOC吗? 最佳答案 您只是在JSX中将HOC作为函数调用,而您需要使用为了渲染它。//ApplyyourHOCconstEnhancedC