React.js 并将 autoHide 称为属性答案

【问题标题】：React.js and referring autoHide as a propertyReact.js 并将 autoHide 称为属性
【发布时间】：2015-06-25 08:59:27
【问题描述】：

我有一个 Materialize-css 组件，我正在尝试将其转换为 React。这是DeterminatePreloader。如果autoHide 是true，我想拥有autoHide 属性以将变量show 设置为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;

【问题讨论】：

标签： reactjs components materialize

【解决方案1】：

您的代码存在一些问题。

您定义了两次DeterminatePreloader。第一个声明是不必要的，因为您还没有定义组件。如果你想设置autoHide的默认值，使用getDefaultProps 方法。
state 应尽可能少包含。方法render 应该计算show 变量，因为它取决于 percent 和 autoHide。我也会将percent 作为道具传递，因为您在此组件中没有任何逻辑。
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;

我还建议阅读Thinking in React。它可以帮助您获得正确的反应编程感觉。

【讨论】：