Блог

Главная - Вопросы по программированию - Передача реквизита не рабочий материал Пользовательский интерфейс реагирует

Передача реквизита не рабочий материал Пользовательский интерфейс реагирует

#reactjs #react-native #material-ui

Вопрос:

Я пытался передать реквизит, чтобы изменить стиль кнопки. В этом случае я бы хотел, чтобы кнопка была «синей», а цвет фона — «оранжевым».

Я передал cool=»true» при вызове кнопки, но кнопка по-прежнему «красная» в «желтом», как если бы состояние cool было ложным..

 import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

/* This is an example of passing props */
const useStyles = makeStyles({
  buttonStyle: (props) => {
    return {
      color: props.cool ? "blue" : "red",
      backgroundColor: props.cool ? "orange" : "yellow",
    };
  },
});

function App(props) {
  const classes = useStyles(props);
  console.log(classes);
  return (
    <>
      <Button cool="true" className={classes.buttonStyle}>
        Click me!
      </Button>
    </>
  );
}

export default App;

спасибо за ответы. Ниже исправлена проблема. Мне было интересно, можно ли включить модификатор «круто» в <Button..>, чтобы его было легче читать, так как return () имеет много частей, кроме кнопки.

 function App() {
  const classes = useStyles({ cool: true });
  console.log(classes);
  return (
    <>
      <h1 className={classes.textStyle}>Let's roll this app out.</h1>
      <Button className={classes.buttonStyle}>Click me!</Button>
    </>
  );
}

Ответ №1:

Если вы хотите обновить стили кнопки с помощью реквизитов компонентов, создайте отдельный компонент, который изменяет стили кнопок в соответствии с реквизитами.

Кнопка охлаждения.jsx

 import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

/* This is an example of passing props */
const useStyles = makeStyles({
  buttonStyle: (props) => {
    return {
      color: props.cool ? "blue" : "red",
      backgroundColor: props.cool ? "orange" : "yellow"
    };
  }
});

function CoolButton({ cool }) {
  const classes = useStyles({ cool });
  return (
    <>
      <Button className={classes.buttonStyle}>Click me!</Button>
    </>
  );
}

export default CoolButton;

App.js

 import CoolButton from "./CoolButton";

function App(props) {
  return (
    <>
      <CoolButton cool="true">Click me!</CoolButton>
    </>
  );
}

export default App;

https://codesandbox.io/s/cool-button-8its7

Дайте мне знать, если вам понадобится дополнительная поддержка.

Ответ №2:

Для передачи реквизита в ваши стили вы должны передать реквизит непосредственно в метод useStyles:

 const classes = useStyles(props);

или

 const classes = useStyles({ someSpecificProp });

Комментарии:

1. хм, я добавил const classes = useStyles(props) , и это не решает проблему?

2. проверьте этот пример — material-ui.com/styles/basics/#adapting-based-on-props

3. классы const = стили использования({ круто: верно })

4. Да! это действительно решит проблему. Есть ли способ написать это в <Кнопке …>? Таким образом, легче понять, что «круто» изменяет кнопку. Потому что в возврате есть много других вещей ()

5. Хм, я не уверен в вашем случае, но вы можете создать свой собственный компонент кнопки и добавить туда эту логику.

Ответ №3:

Попробуйте это:

 const useStyles = props => makeStyles({
  buttonStyle: {
      color: props.cool ? "blue" : "red",
      backgroundColor: props.cool ? "orange" : "yellow",
  },
});

И назови это:

 const classes = useStyles(props)();
Метки: