在 React 中，如何将参数从子组件传递给父组件？

Question

在 React JS 中，我无法将值从子组件传递到父组件这个问题是上一个问题在 React JS 中的后续问题，我如何告诉父组件子组件发生了某些事情？这是我正在使用的代码示例...我有一个问题和两个问题：1) 尽管 'label' 在 的 render 方法中（我可以在调试器中看到它有一个值）InfoBox，但当它传递给 ContainingBox 的boxChosen方法时，它总是出现“未定义”。我在这里做错了什么？2）在使用 JSX 构建 InfoBox 时，有什么方法可以减少重复（DRY this up）。特别是，让我selectBox={this.boxChosen}烦恼的是在 JSX 中为每个 InfoBox 实例重复3) 孩子或父母对方法的命名是否有任何共同的模式或公认的做法？特别是，您会看到这段代码让我定义一个selectBox在子进程中调用的方法和另一个boxChosen在父进程中调用的方法。这对我来说似乎是任意的，因为我只是选择了两个没有冲突的独立名称，以便使其更易于理解。但它让我印象深刻，因为在一个更大的应用程序中，你需要一个一致的函数命名模式来识别哪些方法是“传递”方法（在这种情况下，selectBox）只是将东西传回给父母。我不知道; 只是考虑是否存在命名约定。

Answer 1

this.label不存在，所以它是未定义的。要么 pass this.state.label，要么因为你正在解构对象，只是label. 只是一个小错误

 render() {

    const {label} = this.state

    return (

      <StyledInfoBox onClick={() => {this.props.selectBox(label)}}>

        {label}

      </StyledInfoBox>

    )

  }

您也不需要进行两次解构。

2. 不，你必须将所有的 props 传递给每个组件。没有理由你不能把盒子扔进一个循环中。您可以将标签放在一个数组中并迭代传递所有内容。现在您只需要实际编写一次。

class ContainingBox extends React.Component {

  const boxChosen =(label) => {}

  const labels = ['Aenean malesuada lorem', 'Lorem Ipsum dor ameet'];

  render() {

    return (

      <div>

        {labels.map((ele, index) => {

           <InfoBox

             key={index}

             blurb={{label: ele}}

             selectBox={this.boxChosen}

           />

        })}

      </div>

    )

  }

}

其他人可能比我能更好地回答这个问题。除了给它们命名一些有意义的东西之外，没有真正的约定。你是对的，你可以给它们命名不同的东西，因为它们只是不同范围内的函数。他们没有什么特别之处。你能说出他们同样的事情，但你并不需要到。您可以做的最好的事情是将它们命名为“自我记录”的东西，在它被定义的地方。