Question

单击一个按钮后，我试图更新5个以上组件的状态。我现在将所有状态和事件处理程序放入App.js中。例如，

// MyButton.js
export const MyButton = (props) => {
  <button type='button' onClick={props.onClick}>Click Me!</button>
}

// Component1.js
export const Component1 = ({ name }) => {
    return (
      <h1>{name}</h1>
    );
}

// Component2.js
export const Component2 = ({ name }) => {
    return (
      <h1>{name}</h1>
    );
}

App.js

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

    this.state = { name1: '', name2: '' };
    this.changeNames = this.changeNames.bind(this);
  }

  changeNames() {
    this.changeComponent1Name();
    this.changeComponent2Name();
  }

  changeComponent1Name() {
    this.setState({ name1: 'name1' });
  }

  changeComponent2Name() {
    this.setState({ name2: 'name2' });
  }

  render() {
    return (
      <MyButton onClick={this.changeName} />
      <Component1 name={this.state.name1} />
      <Component2 name={this.state.name2} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));

单击按钮时，由于我必须更新更多组件，因此代码变得更加复杂。我想将状态和事件处理程序放在每个组件中，以便使代码更具可读性。有什么建议吗？

Answer 1

仅循环遍历状态：

  changeNames() {
    let newState = {...this.state}
    for (var stateProp in newState) {
       //add here your logic depending on prop name/for every prop
    }
  }

反应-单击第三个组件时更新多个组件的状态

1 个答案: