javascript - ReactJS 将状态从父级传递给子级

Question

我有以下内容，想知道是否有更优雅的方式来传递 this.state.currentSection状态为 <HeaderButton /> ？:

...
render() {
        return <div>
            <div className="section" style={this.state.currentSection === 'SPECIAL' ? {} : {'opacity': '0.4'}}>
                <HeaderButton active={this.state.currentSection === 'SPECIAL'} text="Special" count={23} backgoundColor={'#c04c36'} onClick={this.setActiveSpecial}/>
            </div>
...

Answer 1

你可以像这样在 render 方法中解构 this.state

render() {
  const { currentSection } = this.state;
  const isActive = (currentSection === 'SPECIAL');
  return (
   <div className="section" style={isActive ? {} : {'opacity': '0.4'}}>
     <HeaderButton active={isActive} text="Special" count={23} backgoundColor={'#c04c36'} onClick={this.setActiveSpecial}/>
   </div>
  );
}