React.js和将autoHide称为属性

Question

我有一个物化-css组件，我正试图将其转换为响应。是DeterminatePreloader。我希望手头有autoHide属性，如果show是true，则将变量autoHide设置为false。由于autoHide是一个属性，因此当函数调用它时，应该可以设置它。我将非常感谢您的意见。我发现的例子要么过于笼统，要么过于具体。

到目前为止，我的代码如下：

var React = require('react');

/**
 * Linear Determinate Preloader
 *
 * Materialize CSS converted to React Component
 *
 * @author samtapucar
 */

var DeterminatePreloader = <determinatePreloader autoHide={false}/>;

var DeterminatePreloader = React.createClass({

  /**
   * Initializes determinate preloader state
   * @returns {{percent: number, show: boolean}}
   */
  getInitialState: function ()
  {
    return{
      percent: 0,
      show: true
    };
  },

  /**
   * Sets determinate preloader state using received value
   * @param value
   */
  setValue: function (value)
  {
    var state = this.state;
    state.percent = value;

    if ( state.percent >= 100 ){
      this.props.autoHide = true;
    }

    if ( this.props.autoHide ) {
      state.show = false;
      this.setState(state);
    }
    else{
      this.setState(state);
    }
  },

  /**
   * Renders the determinate preloader.
   * @returns {XML}
   */
  render: function ()
  {
    var percent = this.state.percent;

    var cx = '';

    var style = {
      'width': percent + '%'
    };

    if (!this.state.show)
      cx = ' hide'


    return (
        <div className={"progress" + cx}>
          <div className={'determinate'} style={style}></div>
        </div>
    );
  }

});

module.exports = DeterminatePreloader;

Answer 1

你的代码有一些问题。

1. 您需要定义两次DeterminatePreloader。第一个语句是不必要的，因为您还没有定义组件。如果要设置autoHide的默认值，请使用getDefaultProps方法。
2. state应该包含尽可能少的内容。render方法应该计算show变量，因为它依赖于percent和autoHide。我也会将percent作为道具来传递，因为您在这个组件中没有任何逻辑。
3. state 不应该被直接覆盖。您应该始终创建一个新的对象，用setState修改它。

var React = require('react');

/**
 * Linear Determinate Preloader
 *
 * Materialize CSS converted to React Component
 *
 * @author samtapucar
 */

var DeterminatePreloader = React.createClass({
  getDefaultProps: function() {
    return {
      autoHide: false,
      percent: 0
    };
  }
  /**
   * Renders the determinate preloader.
   * @returns {ReactComponent}
   */
  render: function () {   
    var style = {
      'width': this.props.percent + '%'
    };

    var cx = '';

    if (this.props.percent >= 100 && this.props.autoHide)
      cx = ' hide';

    return (
        <div className={"progress" + cx}>
          <div className="determinate" style={style}></div>
        </div>
    );
  }

});

module.exports = DeterminatePreloader;

我还建议您阅读反应思维。它可以帮助你在react中获得正确的编程感觉。