Question

在Firefox中使用React道具有一个奇怪的问题。使用Redux和Babel也是如此。

我试图隐藏表单，一旦提交。这在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状态）设置为true的操作。

父组件如下所示：

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，则将“hide”的值传递给子组件。

似乎可以弄清楚出了什么问题。在Chrome中，每次重新呈现状态对象时，父组件中的console.logs似乎都会触发（即每当触发操作时），但在Firefox中不会发生这种情况。

状态对象正在正确更新，因此我认为submitInfo: true和hideForm: true在适当的时候会显示。

Answer 1

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

父组件的渲染方法如下所示：

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>
    );
  }
}

React prop不在Firefox中传输

1 个答案: