如何使用 props 导出 React 组件？答案

【问题标题】：How to export React component with props?如何使用 props 导出 React 组件？
【发布时间】：2016-04-11 19:18:04
【问题描述】：

我现在正在研究 React.js，你能帮我吗？如何使用 props 导出 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)

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

【问题讨论】：

导出组件是export default Group
@erichardson30 好的！我怎样才能在这里使用它？ codepen.io/azat-io/pen/XdZZze
如果您将所有组件都放在一个文件中，则不需要使用它
@erichardson30 但我没有在一个文件中

标签： javascript reactjs ecmascript-6

【解决方案1】：

你会想要创建一个 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;

【讨论】：

例如这里：codepen.io/azat-io/pen/XdZZze。如果将 React.render(<Main />, document.body) 更改为 React.render(<Group children={children} />, document.body) - 效果会很好。最好的解决方法是什么？
Main 中的返回错误。没有
html 元素。它应该看起来像 render() { return ( <Group children={children} /> ) }
这只是一个例子。我可以重命名并给主组件起任何名字
codepen.io/anon/pen/wGyyOG 请看这个。这行得通。我知道这只是一个例子。但是 main 中的 render 方法在语法上不正确。
哈哈。这很简单。谢谢！

【解决方案2】：

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

第二个，而不是

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

写，

export default Group

【讨论】：

这不是一个真正的项目。例如，我该怎么做？ codepen.io/azat-io/pen/XdZZze
在前面的评论链接到这个例子。但是这里添加了将导入组的主要组件
见@erichardson30 的回答。你应该明白了。使用 Card 类创建“Card.jsx”并在末尾导出语句。创建 'GroupList.jsx' 并从 './Card.jsx' 导入 Card 并导出默认 GroupList。创建 'Group.jsx' 从 './GroupList.jsx' 导入 GroupList 并导出默认组。 Main.jsx 将是您的入口点，应该从 './Group.jsx' 导入 Group 并包含主类和 React.render 代码，并将 const children[] 作为道具传递给 Group 组件。