react父组件向子组件传递值问题请教？

Question

页面效果如图,对应的组件如下：

const BatchGroupDialog = ({show, hideFunc}) => {
  const display = show ? 'block' : 'none';
  return (
    <div className="lcx02_batchGroup-show" style={{display}}>
      <i className="top-arrow" />
      <ul className="lcx02_chooseGroup">
        <li><Radio id="radio1" name="group" value="group1">分组1</Radio></li>
        <li><Radio id="radio2" name="group" value="group2">分组2</Radio></li>
        <li><Radio id="radio3" name="group" value="group3">分组3</Radio></li>
        <li><Radio id="radio4" name="group" value="group4">分组4</Radio></li>
        <li><Radio id="radio5" name="group" value="group5">分组5</Radio></li>
      </ul>
      <button className="lcx_btn-danger">确定</button>
      <button className="lcx_btn-default" onClick={hideFunc}>取消</button>
    </div>
  );
}

上述组件中li里面的数据从后台请求回来，所以我把组件改成了下面：

const BatchGroup = ({groupData, show, handleBatchFun}) => {
  const display = show ? 'none' : 'block';
  return (
    <div className="lcx02_batchGroup-show" style={{display}}>
      <i className="top-arrow" />
      <ul className="lcx02_chooseGroup">
        {groupData.map((item) => (<li><input type="radio" value={item.value} />{item.name}</li>))}
      </ul>
      <button className="lcx_btn-danger">确定</button>
      <button className="lcx_btn-default" onClick={handleBatchFun}>取消</button>
    </div>
  );
};
BatchGroup.propTypes = {
  groupData : React.PropTypes.array,
  show : React.PropTypes.bool,
  handleBatchFun : React.PropTypes.func
};

父组件调用BatchGroup组件片段代码如下：

render() {
      const data = [{name:'a', vip : 'VIP1', smNum : 21, fansNum : 77, status : '正常'}, {name : 'b', vip : 'VIP2', smNum : 9, fansNum : 54, status : '不正常'}];
      const groupData = [{name : '分组1', value : 1}, {name : '分组2', value : 2}, {name : '分组3', value : 3}];
      return (
        <div>
          <div className="lcx02_pageTitle">参数二维码</div>
          <div className="lcx02_newQrCode-wrap">
            <div className="lcx02_newGroup-left">
              <a href="" className="lcx_btn-danger btn-hg">新建参数二维码</a>
              <div className="lcx02_newGroup">
                <button className="lcx_btn-default" onClick={this.newGroupHandle}>+新建分组</button>
                <NewGroup show={this.state.newGroupDialog} handleFun={this.newGroupHandleFunc} />
                <GroupList />
              </div>
            </div>
            <div className="lcx02_QrInfo-list">
              <div className="lcx_search-wrap lcx02_Qr-code fr">
                <input  className="fl" type="text" placeholder="输入规则名" />
                <button className="lcx_search-btn fl">搜索</button>
              </div>
              <input type="checkbox" id="selAll" onClick={this.batchSelect} /><label htmlFor="selAll" className="lcx02-checkAll">全选</label>
              <a href="" onClick={this.batchGroupShow} className="lcx02_batchGroup lcx_btn-default">批量分组
                <BatchGroup groupData={groupData} show={this.state.batchGroupDialog} handleBatchFun={this.batchGroupHandleFunc} />
              </a>
              <a href="" className="lcx_btn-default">批量停用</a>
              <table className="lcx_table-default">
                <GroupListBar />
                <tbody>
                  {data.map((item) => (<QrItem isAllSelect={this.state.allSelect} itemValue={item} />))}
                </tbody>
              </table>
              <div className="lcx_page-wrap">
                <span>共计2条，每页显示10条</span>
                <button className="lcx_pre-page" />
                <button className="lcx_next-page" />
                <span className="lcx_go-page">共1页，第<input type="text" />页</span>
                <button className="lcx_cancel-btn">确定</button>
              </div>
            </div>
          </div>
        </div>
      );
    }

问题就是：父组件如何向子组件传递一个数组或者对象啊，好像React.PropTypes不支持直接传递对象哦？

Answer 1

这样就可以了：
BatchGroup.propTypes = {
groupData : React.PropTypes.arrayOf(React.PropTypes.shape({})),
show : React.PropTypes.bool,
handleBatchFun : React.PropTypes.func
};

Answer 2

groupData: React.PropTypes.array,
你的groupData明明是一个数组, 然而你校验的时候校验对象.

Answer 3

你的父组件向子组件传入参数的方式没有错。
可能是你没有在子组件接收groupData。
接收的方式必须是通过props，没有props，你的groupData是传不到子组件，也就无法验证了。

const { groupData } = this.props