主页 / 问题 / 549974
Accepted
Oner Ksor
Asked:2020-07-29 22:42:41 +0000 UTC2020-07-29 22:42:41 +0000 UTC

React 组件间通信：如何在组件间传递数据？

  • 772

你好！问题是关于 React 组件之间的通信，即：将数据从一个组件传递到另一个组件。

假设有<Layout/>一个包含对象数组的页面items。对于每个元素items，都会创建一个组件<Item />：

Layout.jsx代码：

class Layout extends Component {
  renderItems() {
    var items = [
      {name: 'Ivan', _id: '1'},
      {name: 'Petya', _id: '2'}
    ];

    return items.map( (each) => {
      return (
        <Item each={each} />
      );
    });
  }

  render() {
    return (
      <main> {this.renderItems} <main>
    );
  }
}

Item.jsx代码：

class Item extends Component {
  render() {
    return (
      <div>
        {this.props.each.name}
      </div>
    );
  }
}

现在让我想实现点击每个<Item />输出到控制台的_id. 在内部很容易做到这一点<Item />：

新的 Item.jsx 代码：

class Item extends Component {
  printId() {
    console.log(this.props.each._id);
  }

  render() {
    return (
      <div onClick={ this.props.printId.bind(this) }>
        {this.props.each.name}
      </div>
    );
  }
}

但是如果你需要在外面，也就是在里面实现“Show _id”按钮<Layout />呢？

让我们说在<Item/>我们添加的每个里面checkbox。如果此复选框被勾选为selected，那么当您单击“Show _id”按钮时，_id所有选中的 ov 都会显示在控制台Item中。

但是如何将_id标记Item的 ov 传递给<Layout />？

预先感谢您的答复。

javascript

1 个回答

  1. Best Answer

    答案立即在文档中找到，感谢@AlexeyTen 的提示。我不得不受苦，但解决方案已经准备就绪，在下面。

    从组件调用函数时，someFunction.bind(this)我们可以传递任意数量的参数：someFunction.bind(this, arg1, arg2, ...). 这就是答案。

    对于上面的例子：给组件添加一个函数printId，给组件<Layout />分配一个事件<Item />调用。我们会将元素的当前 _id 作为参数传递给函数。新的 Layout.jsx 代码：printIdonClick

    class Layout extends Component {
  printId(id)
    console.log(id);

  renderItems() {
    var items = [
      {name: 'Ivan', _id: '1'},
      {name: 'Petya', _id: '2'}
    ];

    return items.map( (each) => {
      const eachId = each._id;
      return (
        <Item onClick={this.printId.bind(this, eachId)} each={each} />
      );
    });
  }

  render() {
    return (
      <main> {this.renderItems} <main>
    );
  }
}

    但是，上面的代码将不起作用。原因是<Item />这不是真正的 DOM 元素，所以OnClick它不能有事件。线路<Item onClick={this.printId.bind(this, eachId)} /> onCLick正常props。为了让这段代码按预期工作，在组件内部<Item />，在真正的 DOM 元素上，我们需要注册onClick我们的函数到现在的转移props：

    class Item extends Component {
  render() {
    return (
      <div onClick={this.props.onClick}>
        {this.props.each.name}
      </div>
    );
  }
}

    现在一切正常。

    • 3

相关问题