Question

我正在为我的项目使用Reactjs。我有一些关于删除子组件中的数据的问题，并注意到randparent组件中的更改。这是祖父母组件的代码：`

class GrandParent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuData: [
        { menu: "1", optionName: "A" },
        { menu: "2", optionName: "A" },
        { menu: "3", optionName: "B" },
        { menu: "4", optionName: "B" },
        { menu: "5", optionName: "B" }
      ],

      optionData: [{ optionName: "A" }, { optionName: "B" }]
    };
  }
  render() {
    <div>
      <Parent optionData={optionData} />
    </div>;
  }
}

以下是父组件的代码：

class Parent extends Component {
  render() {
    <div>
      <Child optionData={this.props.optionData} />
    </div>;
  }
}

下一个是子组件：

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: []
    };
  }

  componentDidMount() {
    this.setState({
      options: this.props.optionData
    });
  }

  deleteOptionA = () => {
    let { options } = this.state;
    newOption = options.filter(option => option.optionName !== "A");
    this.setState({ options: newOption });
  };

  render() {
    <div>
      <button onClick={this.deleteOptionA}>deleteOptionA</button>
    </div>;
  }
}

我需要删除optionA。但是，optionA也处于祖父母组件状态。通知祖父母在menuData和optionData状态下删除optionA的最有效方法是什么？

Answer 1

在GrandParent中创建deleteOption处理程序，并将该处理程序传递给Child。单击删除按钮后，您将调用道具中传递的处理程序，以从父级状态中删除该选项。

     class GrandParent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          menuData: [
            { menu: "1", optionName: "A" },
            { menu: "2", optionName: "A" },
            { menu: "3", optionName: "B" },
            { menu: "4", optionName: "B" },
            { menu: "5", optionName: "B" }
          ],

          optionData: [{ optionName: "A" }, { optionName: "B" }]
        };
      }

      deleteOptionA = () => {
        let { options } = this.state;
         newOption = options.filter(option => option.optionName !== "A");
        this.setState({ options: newOption });
      };

      render() {
        <div>
          <Parent optionData={optionData} deleteOptionA={this.deleteOptionA}/>
        </div>;
      }
    }

在儿童中：

  class Child extends Component {    

  render() {
    <div>
      <button onClick={this.props.deleteOptionA}>deleteOptionA</button>
    </div>;
  }
}

现在，当GrandParent的状态更改时，您无需管理子组件中的状态，子组件将使用新的道具重新呈现。

Answer 2

不是传递optionData本身，而是传递来自GrandParant的函数，该函数从GrandParant的{{1}}中删除了此选项。如果state需要呈现或使用Child，也可以同时传递两者。

optionData

现在，您无需在2个不同的位置复制状态，并且class GrandParent extends Component { constructor(props) { super(props); this.state = { menuData: [ { menu: "1", optionName: "A" }, { menu: "2", optionName: "A" }, { menu: "3", optionName: "B" }, { menu: "4", optionName: "B" }, { menu: "5", optionName: "B" } ], optionData: [{ optionName: "A" }, { optionName: "B" }] }; } deleteOptionA () { // delete optionA here from optionData and menuData } render() { <div> <Parent deleteOptionA={deleteOptionA} /> </div>; } } class Parent extends Component { render() { <div> <Child deleteOptionA={this.props.deleteOptionA} /> </div>; } } const Child = ({ deleteOptionA }) = ( <div> <button onClick={deleteOptionA}>deleteOptionA</button> </div> );组件变得更加简单。

在Reactjs中绑定数据

2 个答案: