鍍金池/ 問答/HTML/ React 公用組件傳參的優(yōu)化方式，克隆

React 公用組件傳參的優(yōu)化方式，克隆

頁面組件A有一個state叫a1，是一個數(shù)組，用來存儲參會人員；
組件B是一個操作數(shù)組的組件，比如增刪已經(jīng)選中的參會人員；

A調(diào)用B，傳入?yún)藛T。在B中反顯A傳入的參會人員進(jìn)行增刪。
這個時候，如果A直接傳入?yún)?shù)，在B的componentWillmount或者DidMount中同步傳入?yún)?shù)到state,如果直接修改state就會同步修改外部A的state;為了解決這個問題，我用了比較笨的辦法，就是在同步外部參數(shù)到B的state時，先深克隆一下；

請問馬油們有什么優(yōu)雅的辦法規(guī)避？

回答
編輯回答
別瞎鬧

不知道你的state是怎么傳的？我很確定的告訴你，如果子組件不回調(diào)父組件方法修改父組件的state時，子組件是無法直接改變父組件state的屬性值的。
以下給你一個實例：

import React, {Component} from 'react';

class A extends Component {
  constructor() {
    super(...arguments);
    this.state = {attendee: []};
  }
  
  render() {
    return (
      <B attendee={this.state.attendee}/>
    );
  }
}

class B extends Component {
  constructor() {
    super(...arguments);
    this.state = {attendee: []};
  }
  
  componentWillMount() {
    this.setState({attendee: this.props.attendee});
  }
  
  updateAttendee(att) {
    const {attendee} = this.state;
    // do something
    this.setState({attendee});
  }
  
  render() {
    const {attendee} = this.state;
    return (
      <div>
        {
          attendee.map(att => {
            return (
              <div onClick={() => this.updateAttendee(att)}>
                {att.name}
              </div>
            );
          })
        }
      </div>
    );
  }
}

export default A;
2018年5月31日 15:04