小编mAc*_*mAc的帖子

我很反应(或说网络技术).我开始构建一个使用不同组件的应用程序.当我浏览文档时,我想放入isRequiredpropTypes,约束用户isRequired在使用组件时提供所有属性.

但是,在这个例子中,即使我没有传递isRequired属性,我也可以加载组件.

var PanelPreview = React.createClass({
    getInitialState: function(){
       return { captionIndex: 0 };
    },
    propTypes: {
       beforeSrc: React.PropTypes.string.isRequired,
       afterSrc: React.PropTypes.string.isRequired,
       captionTable: React.PropTypes.array
    },
});
module.exports = PanelPreview;

使用此组件的应用:

   React.render(
      < PanelPreview />,
      document.getElementById('main')
   );

我想约束组件的用户提供这两个值,否则会抛出某种错误.

我正在努力学习反应.放手一搏,我正在尝试使用react-bootstrap并尝试使用react-bootstrap手风琴来实现手风琴.首先我尝试使用ButtonToolBar,它工作正常.

var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Button = ReactBootstrap.Button;
var buttonsInstance = (
    <ButtonToolbar>
      <Button>Submit</Button>
      <Button>Cancel</Button>
    </ButtonToolbar>
);

React.renderComponent(
    buttonsInstance,
    document.getElementById('app')
);

但是,react-bootstrap的手风琴代码无效.它显示的内容,但不像我们手风琴的情况.这是代码:

var Accordion = ReactBootstrap.Accordion;
var Panel = ReactBootstrap.Panel;

var accordionInstance = (
    <Accordion>
      <Panel header="Collapsible Group Item #1" key={1}>
        Content1
      </Panel>
      <Panel header="Collapsible Group Item #2" key={2}>
        Content2
      </Panel>
      <Panel header="Collapsible Group Item #3" key={3}>
        Content3
      </Panel>
    </Accordion>
);

React.renderComponent(
    accordionInstance,
    document.getElementById('app')
);

我也尝试过使用,它也表现得一样.我从这里接受了帮助.

有一个类似的问题在这里.但是,在我的情况下,如果没有自定义ReactBootstrp.Panel,我就无法使用它.

任何想法,我怎样才能让它发挥作用？