Question

我刚刚开始学习编码，所以请多多包涵。您能帮我解决以下问题吗？我试图将状态从一个子组件传递到另一个子组件，我正在使用react-typist，一旦键入完成，我想更改另一个组件（即导航栏）上的样式。我相信我应该提高这种状态，但是我无法使其发挥作用。这是我的代码：

import Typist from 'react-typist';

class Intro extends Component {
      constructor (props) {
      super(props);
         this.state = {
         navStatus: 'back'
      };
      this.onIntroTyped=this.onIntroTyped.bind(this);
    }

    onIntroTyped(front){
    this.setState({ navStatus: 'front'});
    }

        render() {
        return (
          <Typist avgTypingDelay={10} 
          startDelay={0} 
          onTypingDone={this.onIntroTyped} 
          navStatus={this.state.navStatus}
          onIntroTyped={this.onIntroTyped}>
          <div class="text">
            .....
            </div>
          </Typist>
        );
      }
}

export default Intro;


class Nav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "slider",
            navStatus: "back"
        };      
    }

    onMenuClick = (event) => {
        if (this.state.id === "slider"){
            this.setState({id: "sliderOut"});
        }
        else (this.setState({id: "slider"}));
    }

    render () {
        return (
            <nav id="navigation" className={"navStatus"}>
            <div class="links">
            <a  href="#" onClick={this.onMenuClick}>Menu</a>
            ...
            </div>
            </nav>

        );
    }
}

export default Nav;

Answer 1

在这种情况下，将状态移动到名为 Test 的包装父组件（容器组件）。

状态“ navStatus” 在其子级之间共享，该值可通过道具供每个子级使用。

另外，当孩子想要更改该共享状态的值时，它会调用父级提供的方法，在这种情况下，它是Potrace。父级的状态被更改，所有子元素都因此而呈现，并且它们已通过道具更新了共享价值。

仅出于说明目的，请参见下面的示例

onIntroTyped

class Test extends React.Component {

   constructor(){
     super();
     this.state = {
       navStatus: "back"
     };
     this.onIntroTyped=this.onIntroTyped.bind(this);
   }
  onIntroTyped(){
    this.setState({ navStatus: 'front'});
  }
  
  render() {
    return ( 
    <div>
          <Nav navStatus={this.state.navStatus} />
          <Intro onIntroTyped={this.onIntroTyped} />
      </div>
    );
  }

}

class Intro extends Component {
      constructor(props) {
          super(props);
      }
    
    render() {
        return (
          <button onClick={this.props.onIntroTyped}> test Intro typed </button>
        );
      }
}

class Nav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "slider",
        };      
    }

    onMenuClick = (event) => {
        if (this.state.id === "slider"){
            this.setState({id: "sliderOut"});
        }
        else this.setState({id: "slider"});
    }

    render () {
        return (
            <nav id="navigation" className={this.props.navStatus}>
            <div class="links">
            <a  href="#" onClick={this.onMenuClick}>Menu</a>
            ...
            </div>
            </nav>

        );
    }
}

ReactDOM.render( <Test /> ,
  document.getElementById('root')
);

在孩子之间传递状态

1 个答案: