Question

我基本上完成了FCC的一个项目（https://www.freecodecamp.com/challenges/build-a-camper-leaderboard）

唯一的定制是，我希望用户能够看到订购的表格（最近或所有时间最佳分数）。

目前我用jQuery告诉他们在用户点击最近或全时列时直接更改标题表css-attribute，但我觉得这不是正确的方法。

这是我的容器代码，它基本上保存了表本身

var recaptchacalls = 0;

var onloadCallback = function(e) {

  grecaptcha.render('cap-' + recaptchacalls, {
    'sitekey' : '<SITE_KEY_HERE>'
  });

  recaptchacalls++;
};

我还是React-Redux的新手，所以国家范式对我来说还是新手。

Answer 1

您可以使用React的状态功能来实现此目的。所以在你的componentDidMount（）或getRecentData（）等中你可以这样做：

componentDidMount() {
    this.setState({ bgColorRecent: 'lightblue' });
}

然后在渲染中，您使用react的内联样式功能响应状态：

render() {
    const recentStyles = {
        backgroundColor: this.state.bgColorRecent || '',        
    };

    return(
        <table className="table table-hover table-striped table-bordered">
           <thead>
              <tr>
                 <th className="rank">#</th>
                 <th className="username">Camper Name</th>
                 <th style={recentStyles} id='col-recent' className="recent clickable" onClick={this.getRecentData.bind(this)}>
        {/*  the rest of your render * /}
    )
}

要设置默认状态，大多数人都使用构造函数：

constructor() {
    super();
    this.state = { bgColorRecent: 'black' };
}

如果你没有在构造函数中设置状态，那么this.state将是未定义的，直到你在componentDidMount函数中调用setState，这意味着它将在第一个渲染中未定义。需要恼人的保护：

const recentStyles = {
    backgroundColor: (this.state || {}).bgColorRecent || '',        
};

最好为渲染函数中引用的任何状态道具设置默认状态。

你肯定是正确的，假设使用jQuery来做这个是个坏主意。 React允许您与虚拟DOM交互，并根据虚拟DOM中的更改战略性地更新实际DOM。它在实际DOM中保留引用以有效地执行此操作。这就是React如规模如此快速有效的原因之一。因此，如果您开始使用jQuery更改实际DOM，则可能会导致许多不同的问题。每当您需要与DOM进行交互时，您都希望采用React的方式来充分利用它的所有功能。

React-Redux中简单的背景颜色变化

1 个答案: