在 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. 只是一个小错误&nbsp;render() {&nbsp; &nbsp; const {label} = this.state&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <StyledInfoBox onClick={() => {this.props.selectBox(label)}}>&nbsp; &nbsp; &nbsp; &nbsp; {label}&nbsp; &nbsp; &nbsp; </StyledInfoBox>&nbsp; &nbsp; )&nbsp; }您也不需要进行两次解构。2. 不，你必须将所有的 props 传递给每个组件。没有理由你不能把盒子扔进一个循环中。您可以将标签放在一个数组中并迭代传递所有内容。现在您只需要实际编写一次。class ContainingBox extends React.Component {&nbsp; const boxChosen =(label) => {}&nbsp; const labels = ['Aenean malesuada lorem', 'Lorem Ipsum dor ameet'];&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {labels.map((ele, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<InfoBox&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;blurb={{label: ele}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;selectBox={this.boxChosen}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }}其他人可能比我能更好地回答这个问题。除了给它们命名一些有意义的东西之外，没有真正的约定。你是对的，你可以给它们命名不同的东西，因为它们只是不同范围内的函数。他们没有什么特别之处。你能说出他们同样的事情，但你并不需要到。您可以做的最好的事情是将它们命名为“自我记录”的东西，在它被定义的地方。