javascript - 更改子组件的状态(CSS 属性)

Question

所以我有一个上传页面Upload，它有一个子组件Popup，它是一个弹出菜单。这里的目标是单击上传页面上的提交按钮，并更改 Popup 组件的 CSS 属性以使其可见。我对 ReactJS 相当陌生，我无法在这里找到一个问题来帮助我到达我需要的地方。

这是上传页面组件。具有带有 Submit() onClick 的按钮:

class Upload extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            submitted: false,
        };
        this.submit = this.submit.bind(this);
    }

    submit() {
      this.setState({
        submitWrapper: '500px',
        submitDetails: '300px',
        submitButton: 'block',
        opacity: '1',
        submitted: true
      });
      console.log(this.state)
    }



  render() {
    return(

          ....

           <button
            id="upload-submit"
            onClick={this.submit}>
            Submit
          </button>

           ....

           <Popup></Popup>

这是弹出组件。我在这里定义状态，但我不知道如何从父组件更改它:(

class Popup extends React.Component {
  constructor(props) {
        super(props);

        this.state = {
          submitWrapper: '0px',
          submitDetails: '0px',
          submitButton: 'none',
          opacity: '0'
        }
  }

  render() {
    return(
      <div id="submit-message"
           style={{height: `${this.state.submitWrapper}`}}>
          <h1 style={{opacity: `${this.state.opacity}`}}> GOOD JOB </h1>
          <hr style={{opacity: `${this.state.opacity}`}} />
            <div className="submit-details"
                 style={{height: `${this.state.submitDetails}`}}>
            </div>
            <button style={{display: `${this.state.submitButton}`}}
                    onClick={this.state.submitWrapper = '0px'}> Finished </button>
      </div>
    )
  }
}
export default Popup;

我觉得我在这里错过了一些令人难以置信的简单的东西。

Answer 1

虽然具有基于组件的架构，但很明显您的样式与组件本身位于同一位置。

因此，与其从父级传递样式，不如使用任何 css-in-js 库更好地管理样式，然后有条件地应用 className。

因此，对于您的 PopUp，您将有一个 open 属性并从 Parent 进行设置。然后，Popup 可以根据 prop 应用它自己的样式。

父级

render(){
  return(){
     <PopUp open={this.state.open}/>
  }
}

弹出窗口

render(){
  return(){
    <div className={this.props.open ? 'popUpShow': 'popUpHide' }>
    </div>
  }
}

或者(使用 css-in-js lib )

render(){
  return(){
    <div className={this.props.open ? classes.popUpShow': classes.popUpHide }>
    </div>
  }
}

希望这有帮助! 😇