React JS - 将方法传递两个级别

Question

我正在尝试构建一个简单的小游戏以获得乐趣，但是当我将这种方法传递给它的孙子时，我正在努力争取。我找到了类似的主题，但没有一个回答我的问题。对于这个问题，我已经设法将代码缩小到了问题的范围。

相关的组件结构是App.js > Runeboard.js > Rune.js

目标：让Rune.js在每个符文上都有一个onClick函数，该函数由this.state.usersRunes中的任何内容动态生成。

我不相信函数本身有任何问题，或者将它作为道具传递下去，因为在Runeboard.js中甚至在Rune中，控制台记录符文值都会成功。

这有效，但不是this.state.usersRunes数组中的动态：

      return (
            <div>
                Runeboard
                <span onClick={() => this.props.activateRune(this.props.usersRunes[0])}> {this.props.usersRunes[0]} </span>
                <span onClick={() => this.props.activateRune(this.props.usersRunes[1])}> {this.props.usersRunes[1]} </span>
                <span onClick={() => this.props.activateRune(this.props.usersRunes[2])}> {this.props.usersRunes[2]} </span>
                <span onClick={() => this.props.activateRune(this.props.usersRunes[3])}> {this.props.usersRunes[3]} </span>
                <br />
                <br />
            </div>
        );

问题在于，我喜欢this.state.usersRunes（一个整数数组）中的每个项目，一个符文组件，它有自己的onClick，成功执行activateRune及其符号值的参数。 （符文的值是this.state.usersRunes所以this.state.usersRunes = [2,3,5,9]的值将是2,3,5和9。

---

所以即使上面的工作，这不，我不明白为什么：

App.js activateRune函数：

    activateRune(rune) {
        if (this.state.inBet || this.state.mustBet) {
            this.call(rune)
        } else if (!this.state.inBet) {
            this.setMessage("You cannot place a rune first!")
        }
    }

App.js渲染：

                <Runeboard
                    activateRune={this.activateRune}
                    usersRunes={this.state.usersRunes}
                />

Runeboard.js呈现：

        let rune = this.props.usersRunes.map((rune, i) => {
            console.log(rune) // this works and successfully prints the array's integers
            return(
                <div>
                    <Rune activateRune={this.props.activateRune} 
runeValue={rune} key={i} />
                </div>
            )
        })

        return(
            <div>
                {rune}
            </div>
        )

Rune.js呈现：

        return (
            <div onClick={() => this.props.activateRune(this.props.runeValue)}>
                {this.props.runeValue} // this works and successfully displays the value
            </div>
        );

我该如何解决这个问题？

Answer 1

我认为这可能是你的语法问题。

<div onClick={() => {this.props.activateRune(rune)}}>

如果使用花括号{}，则需要返回值：

<div onClick={() => {return this.props.activateRune(rune)}}>

你也可以避免花括号，并让它：

<div onClick={() => this.props.activateRune(rune)}>

Answer 2

向@xiiishaneiiix和@haopeng致敬快速回答！他们的评论/回答帮助我尝试了一些新的东西，这让我测试了一些东西并缩小了原因......

原来它在Runeboard内，与参数和变量名相同的冲突。

        let rune = this.props.usersRunes.map((rune, i) => {
            return(
                <div>
                    <Rune activateRune={this.props.activateRune} runeValue={rune} key={i} />
                </div>
            )
        })

        return(
            <div>
                {rune}
            </div>
        )

具有相同的名称，我试图传递的属性实际上是抓取具有相同名称的变量，而不是map中的参数。

解决方案是重命名变量和参数，清除告诉代码我们想要map中的参数而不是变量：

        let runes = this.props.usersRunes.map((runeValue, i) => {
            return(
                <div>
                    <Rune activateRune={this.props.activateRune} runeValue={runeValue} key={i} />
                </div>
            )
        })

        return(
            <div>
                {runes}
            </div>
        )

谢谢你们！