我在自学React，我遇到了一些难以理解的问题。当我用下面getNavList((中的代码构建我的项目时，当我点击组件中呈现的一个按钮时，我会收到以下错误，"无法读取未定义的‘点击’反应的属性。">
export class Pane extends React.Component {
constructor(props) {
super(props);
}
getNavList() {
var buttons = [];
if(this.props.subNavButtons != null){
for(var i = 0; i < this.props.navButtons.length; i++) {
buttons.push(<Button onClick={this.props.navButtons[i].click()} title={this.props.navButtons[i].title} />);
buttons.push(<Button onClick={this.props.navButtons[i + i].click()} title={this.props.navButtons[i + i].title} />);
buttons.push(<Button onClick={this.props.navButtons[i + i + 1].click()} title={this.props.navButtons[i + i + 1].title} />);
}
} else {
buttons = this.props.navButtons.map(button => (<Button onClick={() => button.click()} title={button.title}/>));
}
return buttons;
}
render() {
return (
<div>
<ul>
{this.getNavList()}
</ul>
</div>
);
}
}
当我用以下更改构建我的项目时，一切都按预期进行：
export class Pane extends React.Component {
constructor(props) {
super(props);
}
getNavList() {
var buttons = [];
if(this.props.subNavButtons != null){
buttons = this.props.navButtons.map((button, index) => (<>
<Button onClick={() => button.click()} title={button.title}/>
<Button onClick={() => this.props.subNavButtons[index + index].click()} title={this.props.subNavButtons[index + index].title}/>
<Button onClick={() => this.props.subNavButtons[index + index + 1].click()} title={this.props.subNavButtons[index + index + 1].title}/>
</>));
}
else {
buttons = this.props.navButtons.map(button => (<Button onClick={() => button.click()} title={button.title}/>));
}
return buttons;
}
render() {
return (
<div>
<ul>
{this.getNavList()}
</ul>
</div>
);
}
}
根据我的发现，当我将函数作为组件属性传递时，"this"似乎会丢失上下文。我尝试绑定传递给父类中Pane对象的函数，但没有成功。我还尝试使用箭头符号来定义函数，但没有成功。话虽如此，为什么从for循环到map函数的这种变化会起作用？
以下是同一代码片段中的一个更小的问题。使用getNavList((，我返回一个React。Fragment使用缩写语法"<>…</>"，但当我尝试使用"<React.FFragment>…&llt；/Rect.FFraction>"时，我收到一个错误，说在我的else语句末尾有一个expected"｝"字符。这到底是怎么回事？
请原谅我的代码片段和React标签中的错误并将其隔开。我不知道如何在不添加额外空格的情况下显示它们，我几乎完全确定这不是语法错误，但如果是这样的话，请随时证明我错了。
onClick={this.props.navButtons[i].click((}
在第一次点击事件中，react是在安装组件时评估属性。这将导致立即调用.click()。有两种方法可以解决这个问题。一种方法是去掉括号，这样就不会立即执行单击处理程序.click。另一种选择是让点击处理程序返回另一个函数(参见最后的示例(。
onClick={((=>button.click((}title={button.title}
在第二次尝试中，您传入一个匿名方法，该方法调用您的.click()。在这种情况下，react会评估作为函数的值，然后保存它。当事件被触发时，react会调用这个函数。
奖励积分！有时，您希望在单击处理程序中使用一个值(如循环中的索引(。但是，当您去触发事件时，它的值是错误的。您可以通过调用一个返回函数的函数来解决此问题。然后，它将允许你正确地确定该值的范围，以便在你需要的时候它就在那里
myThings.map((x, i) => <thing onClick={this.handleClick(i)} />
handleClick = (index: number) => () => {
alert(index);
}
本例中发生的情况是handleClick在装载时执行，似乎它没有被封装在函数中。它接收索引号，然后返回为该单击处理程序存储的另一个函数。当调用任何事件时，它们都会在其作用域中保留索引值的副本，以便您可以访问它