Как повторно использовать кнопку Custom Material-ui внутри приложения реакции?

Question

Я разрабатываю свое первое приложение React. Я импортировал кнопку Material-ui и настроил ее.

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

Где мне нужно написать этот конкретный текст для каждой кнопки?

Моя кнопка видна, когда я импортирую ее в другие компоненты, но я не вижу текст, который я написал внутри компонента кнопки. Кнопка остается пустой.

Мой пользовательский компонент кнопки: MyButton:

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

const styles = () => ({
  button: {
    margin: 50,
    padding: 10,
    width: 180,
    fontSize: 20
  }
});

function MyButton(props) {
  const { classes } = props;
  return (
    <Button variant="contained" color="primary" className={classes.button}>
      <b>  </b>
    </Button>
  );
}

export default withStyles(styles)(MyButton);

Другой компонент, куда я импортирую компонент MyButton: Home:

import React from "react";
import "../App.css";
import MyButton from "./Button";

function Header() {
  return (
    <header className="Header">
      {/* background image in css file */}
      <h1>Welcome </h1>
      <h3> description...</h3>
      <MyButton>Play now</MyButton>
    </header>
  );
}

export default Header;

Я ожидаю, что кнопка покажет «Воспроизвести сейчас» ( Ожидаемый вывод ), но на данный момент она остается пустой ( Фактический вывод ).

Answer 1

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

Передать ключевое слово "children" как "props"в компонент MyButton:

function MyButton(props) {
  const { classes, children } = props;
  return (
    <Button variant="contained" color="primary" className={classes.button}>
      <b>{children}</b>
    </Button>
  );
}

Затем напишите текст своей кнопки внутри кнопки, как вы это сделаете в html:

<MyButton> Play now </MyButton>

Answer 2

Вы получите наибольшую гибкость от своего пользовательского Button, если передадите все реквизиты вместе с завернутым Button. Это автоматически позаботится о children и classes, если вы используете ключи класса в вашем styles объекте, которые соответствуют CSS-классам , поддерживаемым для обернутого компонента.

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

const styles = () => ({
  root: {
    margin: 50,
    padding: 10,
    width: 180,
    fontSize: 20,
    fontWeight: "bold"
  }
});

function CustomButton(props) {
  return <Button variant="contained" color="primary" {...props} />;
}

export default withStyles(styles)(CustomButton);

Обратите внимание, что в примере с песочницей это позволяет вам использовать другие функции Button, такие как disabled, указывать дополнительные стили или переопределять некоторые свойства, указанные в CustomButton.

Если у вас есть сценарий, в котором вам нужно явно обработать children (в моем примере выше я использовал fontWeight CSS вместо тега <b>), вы можете использовать следующий синтаксис, чтобы все равно проходить через все подпорки к завернутому компоненту:

function CustomButton({children, ...other}) {
  return <Button variant="contained" color="primary" {...other}><b>{children}</b></Button>;
}

Answer 3

Передать текст кнопки в качестве реквизита для вашего компонента кнопки

<MyButton text="Play now"></MyButton>

Тогда внутри компонента MyButton вы можете получить его как

  function MyButton(props) {
   const { classes,text } = props;
    return (
     <Button variant="contained" color="primary" className={classes.button}>
       <b> {text} </b>
      </Button>
    );
  }