Question

我试图弄清楚如何在React中使用Material UI。

我已安装模块，并尝试创建按钮组件。

我有：

Button.js

import React from 'react';
import FlatButton from 'material-ui/FlatButton';

const style = {
  margin: 12,  
};

const MyButton = () => (
    <div>
        <FlatButton  />


    </div>
);

export default MyButton;

现在，我尝试将Button与输入用于我的特定元素。

在我的Landing.js组件中，我有：

import React from 'react';
import MyButton from './materialui/Button.js';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const Landing = () => (

  <div className="hero">
    Projects
    <p className="tagline">Create project</p>
    <MuiThemeProvider>
      <MyButton
        secondary={true}
        backgroundColor="$navy"
        hoverColor="$green"
        label="GET STARTED"

      />
    </MuiThemeProvider>
  </div>

);

export default Landing;

但是，当我尝试这个时，我收到一条错误消息：

警告：失败的道具类型：所需的道具标签或儿童或图标是没有在FlatButton中指定。

如果我在按钮上放了一个标签，那么每次我想要更改标签时我都需要制作一个不同的按钮。有没有办法在组件中定义样式和标签，我想使用按钮？ Material UI上的示例似乎显示了以这种方式使用的按钮，但是我无法看到缺少什么来使其设置正常工作。

Answer 1

有没有办法可以在组件中定义样式和标签我想使用按钮吗？

是的，你可以，问题是你是从Landing组件传递道具中的值，而不是在MyButton组件中使用。看看你在道具中从父传递的任何值都不会直接应用。

像这样写：

const MyButton = props => (
    <div>
        <FlatButton  {...props} />
    </div>
);

现在，您从父级传递的所有值都将传递给FlatButton。

注意：

通过{...props}所有的道具值都会传递给FlatButton，但如果你想传递一些特定的不是全部，那么使用解构并取出这些值然后传递。

像这样：

const MyButton = props => { const {label, backgroundColor, hoverColor, secondary=false} = props; return <div> <FlatButton {...{label, backgroundColor, hoverColor, secondary}} /> </div> };

Answer 2

我发现你还有问题。因此，通过简单的方式发布详细信息，让您更好地理解。如果您了解传播操作符，另一个答案也完全没问题。这是另一种做法。

您看到此警告的原因。顺便说一句，这不是错误，但是警告是警告：）

警告：失败的道具类型：未在FlatButton中指定所需的道具标签或儿童或图标。

因为，FlatButton期望至少有一个道具，即label / childern / icon，但你没有一个道具就打过电话。因此，我们应该将标签道具传递给FlatButton以查看按钮上的名称。 check here了解更多详情。

现在，您已经将正确的道具传递给MyButton组件，但问题是您没有在MyComponent中接收这些道具并将其传递给FlatButton。我建议你在MyButton中接收道具并将其传递给FlatButton。

我清理了你的代码请看看

接收道具并将其传递给FlatButton

import React from 'react';
import FlatButton from 'material-ui/FlatButton';

const style = {
  margin: 12,  
};

const MyButton = (props) => (
    <div>
        <FlatButton  label={props.label} backgroundColor={props.backgroundColor} hoverColor={props.hoverColor} secondary={props.secondary}/>
    </div>
);

export default MyButton;

具有React的材质UI

2 个答案:

警告：失败的道具类型：未在FlatButton中指定所需的道具标签或儿童或图标。