如何使用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;