未在Firefox中传输的反应道具

Firefox中的React道具存在一个奇怪的问题。还使用Redux和Babel。未在Firefox中传输的反应道具

我试图隐藏表单，一旦提交。这在Chrome上运行良好，但出于某种原因在FF和IE上无效。

所以在这里我有一个简单的组件，一个窗体的div。 display类来自父组件：

class MyForm extends Component { 

    handleFormSubmit(e) { 
    // fires an action that sets submitInfo to true 
    } 

    render() { 
    const { display } = this.props; 

    return (
     <div className={display}> 
     <form onSubmit={ (e) => this.handleFormSubmit(e) }> 
      // some inputs here 
     </form> 
     </div> 
    ); 
    } 
}

当表单提交，一个动作被触发，其设定submitInfo（Redux的状态）设置为真。

父组件看起来像这样：

import { submitInfo, hideForm } from '../actions/main.js' 

class App extends Component { 
    render() { 
    const {submitInfo, hideForm} = this.props; 

    var showForm; 
    if ((submitInfo == true) || (hideForm == true)) { 
     console.log('evaluating showForm'); 
     showForm = 'hide'; 
    } else { 
     console.log('evaluating showForm'); 
     showForm = ''; 
    } 

    return (
     <div> 
     <MyForm display={ 'main-form' + ' ' + showForm } /> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    const { submitInfo, hideForm } = state; 
    return { submitInfo, hideForm } 
}

父组件检查Redux的状态submitInfo = true或hideForm = true。如果为true，则将“隐藏”的值传递给子组件。

似乎可以弄清楚什么是错的。在Chrome中，父组件中的我的console.logs似乎在每次状态对象被重新呈现时（即，每当一个动作被触发时）都会触发，但这在Firefox中不会发生。

状态对象正在被正确更新，所以当他们认为合适时我可以看到submitInfo: true和hideForm: true。

来源

2016-01-21 deetwentytwo

应的类名是'主formhide'，因为它看起来就像你从代码中得到的那样。 –

oops - 我已经纠正了它......我在'main-form'之前连接了一个空格 – deetwentytwo

您应该使用条件而不是类来确定是否显示组件。

父组件的渲染方法会是这个样子：

class App extends Component { 
    render() { 
    return (
     <div> 
     {!(this.props.submitInfo && this.props.hideForm) ? <MyForm /> : null} 
     </div> 
    ); 
    } 
}

现在，我们还可以清理子组件：

class MyForm extends Component { 
    handleFormSubmit(e) { 
    // fires an action that sets submitInfo to true 
    } 

    render() { 
    return (
     <div className="main-form"> 
     <form onSubmit={(e) => this.handleFormSubmit(e)}> 
      ... 
     </form> 
     </div> 
    ); 
    } 
}

来源

2016-01-22 19:32:15 villeaka

未在Firefox中传输的反应道具

回答

相关问题