javascript - 从数据库获取ReactJs按钮的初始状态

Question

我对 ReactJs 很陌生，想知道如何根据 sql 数据库数据设置按钮组件的初始状态？我通过 php 和 json 获取数据，它工作正常，但我只是不知道如何设置状态。每一条提示都值得赞赏!谢谢

var OutfitList = React.createClass({
      render: function() {
        var outfitNodes = this.props.data.map(function (data) {
          return (
            <div className="col-xs-12 col-sm-12 col-md-6 col-lg-6 singleOutfit" style={{background: '#e5e5e5'}}>
              <data author={data.author}>
                <img src={data.url}/>
                <div className='row subImage'>
                  <div className='col-xs-4 col-sm-4 col-md-4 col-lg-4'>
                    <div className={data.fav == 1 ? 'isFav btn' : 'btn'}>Click To Fav</div>
                  </div>
                  <div className='col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center'><h4>{data.title}</h4></div>
                  <div className='col-xs-4 col-sm-4 col-md-4 col-lg-4'>{data.tags}</div>
                </div>
              </data>
            </div>
            );
        });

        return (
          <div className="container">
            <div className="row">

              <h3>ALL</h3>

              {outfitNodes}

            </div>
          </div>
        );
      }
    });

    var App = React.createClass({
      loadOutfitsFromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({data: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },
      getInitialState: function() {
        return {data: []};
      },
      componentDidMount: function() {
        this.loadOutfitsFromServer();
        setInterval(this.loadOutfitsFromServer, this.props.pollInterval);
      },
      render: function() {
        return (
          <div>
          <OutfitList data={this.props.data} />
          </div>
        );
      }
    });

    React.render(
      <App data={data} pollInterval={2000} />,
      document.getElementById('content')
    );

https://jsfiddle.net/6ss41m50/

Answer 1

如果您想设置某些初始状态，请使用getInitialState()。从此方法返回的任何内容都是初始状态，此后可以使用 this.state.buttonState 访问它并使用 this.setState() 修改。

假设您的数据库数据作为 buttonState 传递到此组件，您可以像这样设置状态:

...
getInitialState: function() {
    return {
        buttonState: this.props.buttonState
    }
}

render: function() {
    return {
       <div><button>this.state.buttonState</button></div>
    }
}
...

但是，对于这样的示例，请考虑甚至不设置任何状态，因为它会创建 false source of truth 。相反，您可以直接在按钮中使用从数据库传入的数据。

render: function() {
    return {
        <div><button>this.props.buttonState</button></div>
    }   
}