Question

我正在创建一个菜单，该菜单在滚动时会更改其样式，但是...

这是我header.js的一部分：（它必须是一个类。）

...

render(){
return(
   <header className={`${this.classHeader}`}>
      <nav>
        <div>
          <ul>{this.navigationItems.items.map((item,i)=><NavItem key={i} data={item} />)}</ul>
        </div>
      </nav>
   </header>
)}}

这是mi AppHolder.js：

class AppHolder extends Component {
  constructor(props){
    super(props);
      this.state={
        one:'navBar'
    }
  }

  componentDidMount(){
     window.onscroll = () => this.handleAnimation()
  }

  handleAnimation = () => {
    if(document.documentElement.scrollTop > 100){
      this.setState({
        one:'scroll'
      })
    }
    if(document.documentElement.scrollTop === 0 ){
      this.setState({
        one:'navBar'
      })
    }
  }

  render() {
    return (
      <div className="app">
         <Header classHeader={this.state.one}/>
         <MainContent />
      </div>
    );
  }
}

但是...在HTML中...

<header class="undefined"></header>

我还为相应的类在每个组件中导入了样式

我的问题是...为什么？我该如何解决？在我滚动时更改班级

谢谢！对不起，我英语不好。.来自阿根廷的问候

Answer 1

在标题渲染方法中添加props关键字... <header className={this.props.classHeader}>等。

Answer 2

每次您将classHeader之类的属性传递给组件时，就可以从当前上下文访问名为props的变量。

在您的示例中是这样的：

const { classHeader } = this.props;

因此，您需要做的是从Header组件上的该属性进行消耗，如下所示：

render(){
const { classHeader } = this.props;
return(
   <header className={`${classHeader}`}>
      <nav>
        <div>
          <ul>{this.navigationItems.items.map((item,i)=><NavItem key={i} data={item} />)}</ul>
        </div>
      </nav>
   </header>
)}}

React.js，状态，className

2 个答案: