Question

我想知道这样做的最佳方法是什么。

我有3个组件，App，String和Note。在像这样在App中创建Note元素之前：

<Note
          state={this.state.btnStates[i]}
          onClick={() => this.handleClick(i)}
        />

它像魅力一样工作（handleClick当然是最父组件-App）

但是现在我想将创建音符转移到String组件，我认为这很容易，但是我认为不能实现。我正在这样做：在App组件中，我渲染字符串：

          <String
            btnStates={this.state.btnStates}
            onClick={(i) => this.handleClick(i)}
          ></String>

在字符串组件中：

    for (var i = 0; i < stringLength; i++) {
      notes.push(
        <Note
          key={i}
          onClick={keyFromNoteCall => this.props.onClick(keyFromNoteCall)}
          state={this.props.btnStates[i]}
        ></Note>
      );
    }

并在“注释”组件中：

      <input
        type="button"
        className={this.getClassName(this.props.state)}
        onClick={() => this.props.onClick(this.props.key)}
        value={this.props.value}
        disabled={this.isDisabled()}
      />

React做这种事情的方式是什么？我需要在App中处理逻辑，但是我想将Notes的呈现形式循环移动到另一个组件。

* UPDATE：原来问题出在“密钥”属性上，因为无法用{this.props.key}访问它，为此我创建了另一个属性“ id”，它可以工作。我现在遇到另一个问题，即使绑定了App构造函数之后，登录到handleClick函数中的this也不显示App组件，而是Note本身：/

Answer 1

在不使用诸如Context或Redux之类的状态处理程序的情况下，React的实现方式是将该函数作为props传递。

App.js

<String
    btnStates={this.state.btnStates}
    handleClick={this.handleClick}
/>

字符串组件

for (var i = 0; i < stringLength; i++) {
      notes.push(
        <Note
          key={i}
          handleClick={this.props.handleClick}
          state={this.props.btnStates[i]}
        ></Note>
      );
    }

注释组件

<input
    type="button"
    className={this.getClassName(this.props.state)}
    onClick={() => this.props.handleClick(this.props.key)}
    value={this.props.value}
    disabled={this.isDisabled()}
  />

我还建议您在String组件中执行.map（）而不是for循环。

notes.map(note => 
    <Note key={note.id} 
    handleClick={this.props.handleClick}
    state={note.btnStates}
)

这样，您将不得不重构便笺上有ID，但是您应该这样做，因为将索引用作键会导致问题。

Answer 2

如果我对您的理解正确，则应将App中的onClick更改为此，然后应该这样做。

<String
    btnStates={this.state.btnStates}
    onClick={this.handleClick}
/>

如何从子组件的子组件（ReactJS）调用处理函数

2 个答案: