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

你可以像这样在渲染方法中解构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>
  );
}

Answer 2

您可以为此使用单个变量，而不是编写this.state.currentSection 2 次。 Boolean(null) === false

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

Answer 3

您可以使用 javascript 扩展符号。

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

Answer 4

如果你只想处理一个条件，而不是三元使用&&。

即，而不是：

isActive ? <Component/> : null;

用：

isActive && <Component/>

Answer 5

我会根据该部分的--special类修饰符修改 css 中所有与样式相关的内容。

import classnames from 'classnames';

...

render() {
  const { currentSection } = this.state;
  const isSectionSpecial = currentSection === 'SPECIAL';

  return (
    <div>
      <div className={classnames('section', {
        'section--special': isSectionSpecial
      })}>
        <HeaderButton active={isSectionSpecial} />
      </div>
    </div>
  )
}

CSS

.section {
  ...
}

.section--special {
  opacity: 0.4;
}

.header-button {
  ...
}

.section--special .header-button {
  background-color: #c04c36;
}