孩子从父母那里继承所有财产的方式答案

【问题标题】：Way for child to inherit all properties from parent孩子从父母那里继承所有财产的方式
【发布时间】：2015-09-15 23:58:46
【问题描述】：

我有三个组件构成第四个组件，我想调用Search。

<SearchContainer>
  {this.props.withFilter ? <SearchFilter>Filter Orders </SearchFilter> : null}
   <SearchBox withFilter={this.props.withFilter}'/>
</SearchContainer>

但是，SearchBox 组件本身需要几个道具。

{
  action: React.PropTypes.string,
  name: React.PropTypes.string,
  method: React.PropTypes.string,
  placeholder: React.PropTypes.string,
  withFilter: React.PropTypes.boolean
}

我希望能够调用Search 组件并能够将一大堆道具传递给SearchBox，而不必将每个属性添加到Search。有没有办法让孩子继承父母的道具？

理想情况下，我可以将 props 传递给 Search，SearchBox 可以访问它们，而无需我明确地编写每个属性。

<Search placeholder='Hi'>

【问题讨论】：

在我看来您正在寻找“jsx 传播属性”语法，您可以在其中将所有道具传递给子组件，例如：{... this.props}。查看this page 了解其他示例和选项。

标签： javascript reactjs element prop

【解决方案1】：

正如 Carl Groner 在上面的评论中所说的 spread attributes 成功了。

var React = require('react')

var SearchContainer = require('../shopify-react-ui/SearchContainer')
var SearchFilter = require('../shopify-react-ui/SearchFilter')
var SearchBox = require('../shopify-react-ui/SearchBox')

module.exports = React.createClass({
  displayName: 'Search',
  propTypes: {
    withFilter: React.PropTypes.boolean
  },
  render: function () {
    return (
      <div>
       <SearchContainer>
          {this.props.withFilter ? <SearchFilter>Filter Orders </SearchFilter> : null}
          <SearchBox {...this.props}/>
        </SearchContainer>
      </div>
    )
  }
})

那么你可以像这样使用这个组件：

<Search placeholder='Hi Mom!'/>

【讨论】：