Как сделать отображение click, text и className в презентационном компоненте Redux

Question

Я новичок в реаги-редуксе. Я пытаюсь сделать отображение в Redux презентационный компонент. Однако я не могу этого сделать. Мой код выглядит следующим образом:

    const ABC = ({isAOn, isBOn, isCOn, isDOn,onAClick, onBClick, onCClick, onDClick }) => {
        const Array = [{click:'onAClick',style:'isAOn',text:'AAAA'},
                       {click:'onBClick',style:'isBOn',text:'BBBB'},
                       {click:'onCClick',style:'isCOn',text:'CCCC'},
                       {click:'onDClick',style:'isDOn',text:'DDDD'}]
        return (
            <div>
                {Array.map((test) =>
                    <div onClick={() => test.click} className={({test.style})?'DIV-ON':'DIV-OFF'}>{test.text}</div>
                 )}
            </div>          
        )
    }
    export default ABC

Примечание: 1) isAOn, isBOn являются логическими значениями, которые используются для переключения className компонента.

2) Я также пытался писать по-другому. Например, onClick = {test.click} и т. Д.

3) Я запустил код без сопоставления, он работает нормально. Тем не менее, это создает очень большое количество повторяющегося кодирования, которое я хочу сократить с помощью отображения.

4) Будет очень полезно, если вы предоставите решение, выполнив приведенный выше код в скрипте.

Answer 1

Вы хотите что-то вроде этого:

import React from "react";
import ReactDOM from "react-dom";

const onAClick = () => {
  alert("clicked");
};

const App = ({ isAOn, onAClick }) => {
  const Array = [{ click: onAClick, style: "isAOn", text: "AAAA" }];
  return (
    <div>
      {Array.map(test => (
        <div
          onClick={() => test.click()}
          className={isAOn ? "DIV-ON" : "DIV-OFF"}
        >
          {test.text}
        </div>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App onAClick={onAClick} />, rootElement);

Рабочий пример здесь .

Answer 2

пара вопросов,

• test.click не является функцией. На самом деле это просто строка.
• Даже если это так, вы не вызываете функцию. Для этого вам нужно иметь () в конце вызова.
• у вас есть type.isAOn, и в зависимости от того, что вы разместили, тип не определен где-либо

---

Другой подход может быть следующим.

Вместо того, чтобы деконструировать ваш реквизит, вы должны держать его вместе. Это позволит вам использовать имя строки в массиве, чтобы найти его в объекте props и напрямую передать его в пропозицию onClick. Это избавляет от необходимости помещать анонимную функцию для вызова функции.

const ABC = props => {
    const Array = [{click:'onAClick',style:'isAOn',text:'AAAA'},
                   {click:'onBClick',style:'isBOn',text:'BBBB'},
                   {click:'onCClick',style:'isCOn',text:'CCCC'},
                   {click:'onDClick',style:'isDOn',text:'DDDD'}]
    return (
        <div>
            {Array.map((test) =>
                <div onClick={props[test.click]} className={({type.isAOn})?'DIV-ON':'DIV-OFF'}>{test.text}</div>
             )}
        </div>          
    )
}
export default ABC

Я не делал никаких предположений относительно type.isAOn, поэтому оставил все как есть, но вы можете следовать той же схеме, что и для onClick, чтобы получить доступ к реквизиту, который вы передаете.