material-ui,组件不起作用

时间:2017-03-15 09:08:22

标签: reactjs redux react-redux material-ui

我查看了.attr()上的代码。

当我不使用材料-ui时,import RaisedButton from 'material-ui/RaisedButton'; class Nav extends Component { render () { const style = { margin: 12, }; return ( <nav> <RaiseButton label="机构管理" style="{style}" containerElemet={<Link to="/"></Link>} /> <RaiseButton label="报名成员" style="{style}" containerElemet={<Link to="/apply"></Link>} /> <RaiseButton label="全部成员" style="{style}" containerElemet={<Link to="/driftMember"></Link>}/> <RaiseButton label="全部成员" style="{style}" containerElemet={<Link to="/allMember"></Link>}/> <RaiseButton label="文案设置" style="{style}" containerElemet={<Link to="/textSet"></Link>} /> </nav> ); } } 效果很好。

  

5:8警告'RaisedButton'已定义,但从未使用过no-unused-vars
    15:11警告'style'被分配一个值但从未使用过no-unused-vars
    22:10错误'MuiThemeProvider'未定义react / jsx-no-undef
    22:37错误'muiTheme'没有定义no-undef
    26:14错误'RaiseButton'未定义react / jsx-no-undef
    26:39警告风格支柱值必须是对象反应/风格支柱对象
    27:14错误'RaiseButton'未定义react / jsx-no-undef
    27:39警告样式道具值必须是对象react / style-prop-object

var ctx = $("#graphTest").get(0).getContext("2d");
var MyScale = Chart.Scale.extend({

});

var options = {
  barShowStroke: false,
  scaleBeginAtZero: false,
  scaleOverride: true,
  scaleSteps: 20,
  scaleStepWidth: 2,
  scaleStartValue: -20,
  responsive: true,
  barBeginAtOrigin: true,
  scales: {
    xAxes: [{
      stacked: true,
      ticks: {
                    callback: function(label, index, labels) {
                        return label < 0 ? label * -1 : label;
                    }
                },
      scaleLabel: {
        display: true,
        labelString: 'Nb Fail/Success'
      }
    }],
    yAxes: [{
      stacked: true
    }]
  }
};

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
      data: [-65, 59, 80, -81, 56, 55, 40],
    },

    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
      data: [10, -11, -98, 81, -34, -50, -20],
    }
  ]
};


var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: data,
  options: options
});

1 个答案:

答案 0 :(得分:2)

您的代码中有拼写错误。它已被提升&#34;按钮,而不是&#34;提升&#34;。

修改

另外,请注意 风格=&#34; {样式}&#34;应该是没有引号的style = {style}

和containerElemet应该是containerElement(你错过了 n