javascript - 如何在 React 中动态传递组件？

Question

我正在构建一个石头/纸/剪刀 React 应用程序，但是当我尝试做出选择（石头、剪刀或纸）时遇到问题，保存该选择的值并将其显示在屏幕上。我已经设法 console.log 用户选择的选项的所有值，但我不知道如何将它们传递回我的选择组件，并实际在屏幕上看到它。

你能帮我解决这个问题吗？

非常感谢！

主.js

import React from "react"
import Choice from "./Choice"

import paper from '../images/icon-paper.svg'
import rock from '../images/icon-rock.svg'
import scissors from '../images/icon-scissors.svg'

import './Main.css';

class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            onScreen: true,
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({
            onScreen: false
        })
    }

    render() {
        return(
            <div>
                {/*HOME PAGE*/}
                <div className="main-container" style={{display: (this.state.onScreen ? "block" : "none")}}>
                    <div className="triangle-container">
                        <div onClick={this.handleClick}>
                            <Choice
                                name="paper"
                                image={paper} 
                                borderColor="hsl(230, 89%, 62%)" 
                                extraBorderColor="hsl(230, 89%, 65%)"
                            />
                        </div>
                        <div onClick={this.handleClick}>
                            <Choice
                                name="scissors"
                                image={scissors} 
                                borderColor="hsl(39, 89%, 49%)" 
                                extraBorderColor="hsl(40, 84%, 53%)"
                            />
                        </div>
                        <div style={{gridArea: "bottom"}} onClick={this.handleClick}>
                            <Choice 
                                name="rock"
                                image={rock} 
                                borderColor="hsl(349, 71%, 52%)" 
                                extraBorderColor="hsl(349, 70%, 56%)"
                            />
                        </div>    
                    </div>
                </div>

                {/*RESULT PAGE*/}
                <div className="rsult-container" style={{display: (!this.state.onScreen ? "block" : "none")}}>
                    <Choice />
                </div>
            </div>

        )
    }
}

export default Main

选择.js

import React from "react"

import './Choice.css';

class Choice extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: props.name,
            image: props.image,
            borderColor: props.borderColor,
            extraBorderColor: props.extraBorderColor
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        console.log(this.state.name)
        console.log(this.state.image)
        console.log(this.state.borderColor)
        console.log(this.state.extraBorderColor)
        
    }

    render() {
        return(
            <div className="elem-box">
                <div 
                    style={{borderColor: this.state.borderColor, color: this.state.extraBorderColor}} 
                    className="elem-container"
                    onClick={this.handleClick}
                >
                    <img src={this.props.image} className="choice-image" alt="img" />
                </div>
            </div>
        )
    }
}

export default Choice

标签： javascriptreactjscomponentsfrontend

Answer 1

在组件的状态中添加一个新属性Main（我们称之为choiceName）。

this.state = {
  onScreen: true,
  choiceName: '',
}

Main将您的组件更新handleClick为 curry 函数：

handleClick = (choiceName) => () => {
  this.setState({
    onScreen: false,
    choiceName,
  });
}

然后作为道具发送handleClick到组件：Choice

<Choice
  name="paper"
  image={paper}
  borderColor="hsl(230, 89%, 62%)"
  extraBorderColor="hsl(230, 89%, 65%)"
  handleClick={this.handleClick}
/>

Choice通过删除其handleClick定义并将方法更改为以下来更新您的组件render：

render() {
  return (
    <div className="elem-box">
      <div
        style={{ borderColor: this.state.borderColor, color: this.state.extraBorderColor }}
        className="elem-container"
        onClick={this.handleClick(this.state.name)}
      >
        <img src={this.props.image} className="choice-image" alt="img" />
      </div>
    </div>
  )
}

最后使用该this.state.choiceName值在屏幕上显示。