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 。