Как создать объект вложенного стиля Material-UI из массива, используя карту в React - PullRequest
Новая
       14

Как создать объект вложенного стиля Material-UI из массива, используя карту в React

0 голосов
/ 30 марта 2020

У меня есть некоторые реквизиты, которые передаются вот так 

columns={
  [
    {
      name: "Fund Name",
      width: "40%"
    },
    {
      name: "Review Date",
      width: "20%"
    },
    {
      name: "Company Debt",
      width: "20%"
    },
    {
      name: "Alerts",
      width: "10%"
    }
  ];
}

Мне нужно, чтобы это выглядело так ... 

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: {
        "&:nth-child(1)": {
          width: "40%"
        },
        "&:nth-child(2)": {
          width: "20%"
        },
        "&:nth-child(3)": {
          width: "20%"
        },
        "&:nth-child(4)": {
          width: "10%"
        },
        "&:nth-child(5)": {
          width: "10%"
        }
      }
    }
  }
}

Я пытаюсь это ... 

let rowWidths = this.props.columns.map((item, key) => ({
  "&:nth-child(+key+)": {
    width: item.width
  }
}));

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: {
        rowWidths
      }
    }
  }
}

Но это, очевидно, не работает. Может кто-нибудь, пожалуйста, помогите.

Спасибо

Ответы [ 3 ]

1 голос
/ 30 марта 2020

Вы можете использовать Object.assign, синтаксис распространения и строковые литералы, чтобы получить желаемый результат 

let columns=[
{
    name: "Fund Name",
    width: "40%"
}, {
    name: "Review Date",
    width: "20%"
}, {
    name: "Company Debt",
    width: "20%"
}, {
    name: "Alerts",
    width: "10%",
}]

let rowWidths = columns.map((item, key) =>
        ({
            [`&:nth-child(${key})`]: {
                width: item.width
            }
        })
    );

const localTheme = {
        overrides: {
            MUIDataTableHeadCell: {
                root: Object.assign({}, ...rowWidths)
            }
       }
  } 
  
  console.log(localTheme, rowWidths);
1 голос
/ 30 марта 2020

Используйте Object.fromEntries () , чтобы записать его в одну строку

преобразует список пар ключ-значение в объект. 

  const root = Object.fromEntries(
    columns.map((x, idx) => [`&:nth-child(${idx + 1})`, { width: x.width }])
  );

Демо-версия попробуйте в тексте: 

const columns = [
  {
    name: "Fund Name",
    width: "40%"
  },
  {
    name: "Review Date",
    width: "20%"
  },
  {
    name: "Company Debt",
    width: "20%"
  },
  {
    name: "Alerts",
    width: "10%"
  }
];

const root = Object.fromEntries(
  columns.map((x, idx) => [`&:nth-child(${idx + 1})`, { width: x.width }])
);

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: root
    }
  }
}

console.log(localTheme);
0 голосов
/ 30 марта 2020

Итак, в основном вы хотите преобразовать '&:nth-child(+key+)' в '&:nth-child(1)', '&:nth-child(2)' и т. Д. Вправо.

Чтобы использовать JS выражение или динамическую c строку как keys в объекте их нужно использовать в квадратных скобках []. Я использую уменьшение вместо карты, так как выходные данные должны быть объектами вместо массива 

let rowWidths = this.props.columns.reduce((acc, item, key) =>
  ({
    ...acc,
    [`&:nth-child(${key})`]: {
       width: item.width
     }
   }),
   {}
);

и использовать оператор распространения, чтобы распространять их открытыми в localTheme 

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: {
        ...rowWidths 
      }
   }
...