Javascript 似乎无法更改组件的道具

我有以下两个组件：

为了便于阅读，我将跳过这个问题中的导入和导出

Explorer.js

const Explorer = () => {

    const [selected, setSelected] = useState('C');

     let dirArr = [ 
       <Program key={"C"} name="C" isSelected={true}/>, 
       <Program key={"D"} name="D" isSelected={false}/>
     ];



     const changeSelection = (newSelection) => {
        if (selected !== newSelection){
            dirArr = dirArr.map((el) => {
                switch (el.props.name){
                   case newSelection:
                   case selected:
                       return <Program key={el.props.name} name={el.props.name} isSelected={!el.props.isSelected}/>
                   default:
                    return el
                }
            });
         }
       setSelected(newSelection);
     }


    const handleClick = (e) => {
        //TODO: Make sure only <Program> allowed
       changeSelection(e.target.parentNode.firstElementChild.innerHTML);
    }

    return (
        <div onClick={handleClick}>
            {dirArr}            
        </div>
    ) 
}

const Program = (props) => {

    const [name, setName] = useState(props.name);
    const [size, setSize] = useState(0);
    const [date, setDate] = useState('01.01.75');

    const selectedDeterminer = () => {
        return props.isSelected ? { background: 'blue'} : {}
    }

    return (
        <div style={selectedDeterminer()}>
            <section className="program-name">{name}</section>
            <section className="program-size">{size}</section>
            <section className="program-date">{date}</section>
        </div>
    )

}

---

然后是Program.js

const Explorer = () => {

    const [selected, setSelected] = useState('C');

     let dirArr = [ 
       <Program key={"C"} name="C" isSelected={true}/>, 
       <Program key={"D"} name="D" isSelected={false}/>
     ];



     const changeSelection = (newSelection) => {
        if (selected !== newSelection){
            dirArr = dirArr.map((el) => {
                switch (el.props.name){
                   case newSelection:
                   case selected:
                       return <Program key={el.props.name} name={el.props.name} isSelected={!el.props.isSelected}/>
                   default:
                    return el
                }
            });
         }
       setSelected(newSelection);
     }


    const handleClick = (e) => {
        //TODO: Make sure only <Program> allowed
       changeSelection(e.target.parentNode.firstElementChild.innerHTML);
    }

    return (
        <div onClick={handleClick}>
            {dirArr}            
        </div>
    ) 
}

const Program = (props) => {

    const [name, setName] = useState(props.name);
    const [size, setSize] = useState(0);
    const [date, setDate] = useState('01.01.75');

    const selectedDeterminer = () => {
        return props.isSelected ? { background: 'blue'} : {}
    }

    return (
        <div style={selectedDeterminer()}>
            <section className="program-name">{name}</section>
            <section className="program-size">{size}</section>
            <section className="program-date">{date}</section>
        </div>
    )

}

const程序=（道具）=>{
const[name，setName]=useState（props.name）；
const[size，setSize]=useState（0）；
const[date，setDate]=useState（'01.01.75'）；
常量selectedDeterminer=（）=>{
返回props.isSelected？{background:'blue'}:{}
}
返回(
{name}
{size}
{date}
)
}

在控制台日志记录时，我确信我选择的是元素名称或

el.props.isSelected

正确，它只是在返回的映射上，似乎不会影响结果

---

我想问题在于您使用的是static

isSelected

prop-您需要使用state

selected

变量：

let dirArr = [ 
   <Program key={"C"} name="C" isSelected={selected === 'C'}/>, 
   <Program key={"D"} name="D" isSelected={selected === 'D'}/>
];

让dirArr=[
, 
];

在handleClick函数上，这个

e.target.parentNode.firstElementChild.innerHTML

？@nehasoni在

程序.js

{name}

中，name相当于

props.name

，因此在实际示例中，单击“D”组件的任意位置，结果将是

“D”

是的，这为我解决了这个问题，不过为了从中吸取教训，你能详细说明一下你的答案吗？因为从技术上讲，虽然赋值是静态的，但我仍在更改

map（）

函数中的值。所以我有点困惑为什么它不起作用请看一看我做的这个例子，它更好，更通用的实现-。就这样看吧——react中显示的一切都应该基于某种状态，你应该通过改变这种状态来改变它的外观，这样你就有了唯一的真相来源。所以，您只需要更改选定的状态，您的组件就会根据该状态显示正确的数据。太棒了。是的，我知道在我的实现中，很多仍然是占位符代码（例如，同一文件中的静态赋值

）。我想我没有必要过分复杂化实现，而不是专注于基础