如何使用props导出React组件？

Question

我正在研究React.js现在可以帮助我，请问如何使用道具导出React组件？ 像这样的东西：

class Group extends React.Component {
  static propTypes = {
    children: React.PropTypes.array.isRequired
  };  
  render () {
    return <div>
        <div className='group'>
          <h2>Boys:</h2>
          <GroupList children={
              this.props.children.filter(x => x.sex === 'male')
            } />
        </div>
        <div className='group'>
          <h2>Girls:</h2>
           <GroupList children={
              this.props.children.filter(x => x.sex === 'female')
            } />
        </div>
      </div>
  }
}

React.render(<Group children={children} />, document.body)

它应该像“导出默认组”一样简单

Answer 1

首先，永远不要在document.body中渲染组件

第二，而不是

React.render(<Group children={children} />, document.body)

写，

export default Group

Answer 2

您将需要创建一个html元素ex：`并且在您的React.render中应该如下所示：

React.render(<Group />, document.getElementById("app"));

您不需要将任何道具传递到主要组件中。

要导出组件，有两种方法可以执行此操作。 你可以这样做

export default class Group extends React.Component {}

要么

class Group extends React.Component { 
  ...
}
export default Group;

然后，您需要将其他组件导入要添加它们的组件中。

示例：

import Child from './Child.jsx'
class Group extends React.Component { 
   ...
   render() {
     return (
       <Child />
     )
   }
}
export default Group;

孩子看起来像：

class Child extends React.Component { 
      ...
}
export default Child;