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>
        )

谢谢大家！

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

2 个答案: