javascript - React Js 使用不同的文件更改变量

Question

我有 2 个文件“主页”和“菜单”

这是menu.js

module.exports = class Menu extends Component {
  constructor(){
    super();
    this.state = {
      username : '',
      password : ''
    };
  }

  render() {
    return (
      <View>

        <Text
          style={styles.item}>
          {{ this.state.username  }}
        </Text>


        <Text
          style={styles.item}>
          Logout
        </Text>
      </View>
    );
  }

};

这是主页(main_page.js)

 import Menu from './Menu.js';
  module.exports = class Main extends Component {

    render() {
      return (
        <View>

          <Menu />
        </View>
      );
    }
  };

我想通过触发 main_page.js 中的某些函数来更改 menu.js 中的变量值。我怎样才能做到这一点？

Answer 1

我认为，您需要通过父组件 Main 而不是 Menu 来维护状态，并将值和函数从 Main 传递到 Menu 组件。从菜单调用传递的函数并传递您想要更改的值。

使用它从菜单调用更改功能:

this.props.change('abc')

这样写:

export default class Menu extends Component {
    render() {
        return (
            <View>
                <Text
                  style={styles.item}>
                  {this.props.username}
                </Text>
                <Text
                  style={styles.item}>
                  Logout
                </Text>
            </View>
        );
    }
};

import Menu from './Menu.js';
export default class Main extends Component {
    constructor(){
        super();
        this.state = {
            username : '',
            password : ''
        };
        this.change = this.change.bind(this);
    }

    change(value){
        this.setState({password: value})
    }

    render() {
        return (
            <View>
                <Menu password={this.state.password} change={this.change}/>
            </View>
        );
    }
};