如何在反应应用程序中重用自定义 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 组件的另一个组件：主页：

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;

我希望按钮显示 "Play now" (expected output) but for now it stays empty (actual output)。

Answer 1

将按钮的文本作为道具传递给您的按钮组件

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

Answer 2

此外，我还找到了另一种解决方案，可以直接在每个按钮（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 3

如果您将所有道具传递给包装的 Button，您将从自定义 Button 中获得最大的灵活性。这将自动处理 children 和 classes 只要您在 styles 对象中使用与包装组件支持的 CSS classes 相匹配的 class 键。

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

如何在反应应用程序中重用自定义 Material-ui 按钮？

How to reuse a Custom Material-ui button inside a react-app?

reactjs

button

components

material-ui

reusability