Question

我在React中遇到了一个三元运算符的问题，它在组件内部使用，根据状态呈现内容A或B（作为prop传递）。即使支柱/状态发生变化，三元运算符似乎总是会出现错误（空内容）。这是代码：

class App extends Component {
  constructor(){
    super();

    this.state = {
      activeFooter: false
    }

    this.toggleFooter = this.toggleFooter.bind(this);
  }

    toggleFooter() {
      console.log("toggleFooter !")
      this.setState({ activeFooter: !this.state.activeFooter })

    }

render() {  
 return (

 (...)

<Container className="footerContainer">
        <Row>
        <Col xs="12">

          <StickyFooter
            bottomThreshold={75}
            normalStyles={{
              backgroundColor:"#000",
              width:"100%",
            }}
            stickyStyles={{
              width:"100%",
              backgroundColor:"#000",
              color:"chartreuse",
              opacity:"1",
              borderTopColor: "#05ff57",
              borderWidth: "1px 0 0 0",
              borderStyle:"solid",
            }}
            fullFooter = {this.state.activeFooter}
            onFooterStateChange={this.toggleFooter}
            >

              {this.props.fullFooter ? (
              <div>
               <Row className="footer">
                <Col className="footerCol" xs="4">
                  <ContactModal className="modalContact"/>
                </Col>
                <Col className="footerCol" xs="4">
                  <i className="fas fa-arrow-up" onClick={this.scrollToTop}/>
                </Col>
                <Col className="footerCol"  xs="4">
                  <i className="fas fa-map-marker-alt"/>
                </Col>
              </Row></div> ) : null }

          </StickyFooter>

          </Col>
        </Row>
          </Container>
)
};

我猜这是我的三元运算符语法的问题，而且我有点新意，但我担心这可能是一个更复杂的问题（重新渲染，组件更新没有被触发，或者沿着这些线。）

提前感谢您在正确方向上的任何答案或推动！

尽管状态发生了变化，三元运营商总是假的

0 个答案: