React Component 没有显示不同的文本/信息，尽管被赋予了唯一的对象作为传递的道具

Question

我目前正在创建一个渐进式 web 应用程序，其中包含 React、HTML、JS 和 CSS 用于学习目的，并且遇到了一个问题，尽管我的ExercisePanel不同对象显示了相同的信息，但它们显示了相同的信息。 ExercisePanel是一个风格化的按钮，显示图像和练习名称，并随着不同的对象准确更新。 问题源于我为显示信息而制作的自定义 Modal，因为它始终显示App.js文件中列出的第一个组件的信息。 为了可读性，我还减少了一些字符串。 下面的文件是我认为导致问题的原因，但是我一直无法找出原因。 如果代码混乱，我很抱歉，我是这些工具的初学者。 （顺序是 App.js 然后是 ExercisePanel.js 然后是 Modal.jsx）

// Import React and Component
import React, { Component } from 'react';
// Import CSS from App.css
import './App.css';
import Exercise from './js/classes/Exercise.js';
// Import the Today component to be used below
import ExercisePanel from './Components/ExercisePanel.js'

class App extends Component {
  render() {
    var test = new Exercise("Curl Ups", "10-30", "30 - 90", "A curl up (or sit up) ...", "Medium", "https://img.icons8.com/ios-glyphs/96/000000/sit-ups.png");
    var test2 = new Exercise("TEST2", "ur", "2", "sda", "sad", "");
    return (
      <div className="">
          <div className="topheader">
              <header className="container">
                  <nav className="navbar">
                      <div className="navbar-brand">
                          <span className="navbar-item"><font class="topheader">Let's Move!</font></span>
                      </div>
                  </nav>
              </header>
          </div>
          <section className="results--section">
              <div className="container">
                  <h1>Let's Move is a Website ...</h1>
              </div>
              <div className="results--section__inner">
                <ExercisePanel exercise={test}/>
                <ExercisePanel exercise={test2}/>
              </div>
          </section>
      </div>
    );
  }
}

export default App;

import React from 'react'; 
import ExerciseButton from './ExerciseButton';
import Modal from './Modal'

let ExercisePanel = (props) => {
    return (
        <div>
            <ExerciseButton image={props.exercise.image} id={props.exercise.name} onClick={handleClick}>{props.exercise.name}</ExerciseButton>
            <Modal desc={props.exercise.desc} clickEvent={handleClick} cal={props.exercise.calories} time={props.exercise.estTime} name={props.exercise.name} diff={props.exercise.difficulty}/>
        </div>
    );
}

function handleClick() {
    document.querySelector('.modal').classList.toggle('modal--hidden');
}

export default ExercisePanel;

import React from 'react';
import "./ModalStyle.css"

var Modal = ({name, desc, cal, time, diff, clickEvent}) => {
    return (
        <div className="modal modal--hidden">
            <div style={{backgroundColor: "#beb", padding: "2rem 4rem", maxWidth: "50%", borderRadius: "10px"}}>
                <div className="close-button">
                    <button style={{border: "none", background: "none", cursor: "pointer"}} onClick={clickEvent}>X</button>
                </div>

                <div className="modal--header">
                    <span style={{fontWeight: "bold"}}>{name}</span>
                </div>

                <p>
                    {desc}
                </p>

                <div>
                    <img style={{verticalAlign: "middle"}} src="https://img.icons8.com/ios-filled/50/000000/fire-element.png" alt="calorieImg"/>
                    <span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Calories: " + cal}</span>
                </div>

                <div>
                    <img style={{verticalAlign: "middle"}} src="https://img.icons8.com/pastel-glyph/50/000000/clock.png" alt="clockImg"/>
                    <span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Recommended Time: " + time}</span>
                </div>

                <div>
                    <img style={{verticalAlign: "middle"}} src="https://img.icons8.com/android/40/000000/flex-biceps.png" alt="difficultyImg"/>
                    <span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Difficulty: " + diff}</span>
                </div>

                <div className="modal--infotext">
                    <span>*Values given by estimated calories were from a moderately intense workout for a healthy individual.</span>
                </div>
            </div>   
        </div>
    );
    
}

export default Modal;

Answer 1

我怀疑这是因为当您单击按钮时，它会执行document.querySelector('.modal').classList.toggle('modal--hidden'); 这会切换所有模态上的modal--hidden的 class，因此无论您单击哪个按钮，两个模态都会打开，您只会看到最上面的那个。

您可能希望向您的Modal组件添加一个open道具，并使用该道具有条件地将modal--hidden class 添加到根模态div 。