Не могу изменить реквизит компонента - PullRequest
Новая
       11

Не могу изменить реквизит компонента

1 голос
/ 08 октября 2019

У меня есть два следующих компонента:

Я пропущу import с и export с в этом вопросе для удобства чтения

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

В основном то, что я пытаюсь сделать, нажав кнопку, чтобы отменить выбор предыдущего выделенного компонента и выделить новый.

Следовательно, внутри map я переворачиваю isSelected опору на старый selected элемент и на newSelection

 return <Program key={el.props.name} name={el.props.name} isSelected={!el.props.isSelected}/>

Тогда вот Program.js 

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

}

После входа в консоль, я уверен, я правильно выбираю, будет ли это имя элемента или el.props.isSelected, это только на возвращенной карте, это не такКажется, это влияет на результат

enter image description here

1 Ответ

1 голос
/ 08 октября 2019

Полагаю, проблема в том, что вы используете статическую isSelected prop - вам нужно использовать переменную состояния selected: 

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