开发者问题收集

如何更新已将自身作为属性传递的组件的属性

2020-01-07
52
reactjs

好的，我有一个通用过滤器组件，它接收一个索引过滤器组件（在索引页中使用属性设置）作为属性。它将呈现它。

在通用过滤器组件中，我有一个方法 handleSingleFilter，我需要将其传递给索引过滤器组件，但当然，由于索引过滤器属性是在索引页中设置的，因此它不允许我更新它们。

在索引中： 

   <IndexFilters
      onSingleFilterChange={() => {
         return
      }}
   />

在过滤器中： 

const { filters } = this.props
public handleSingleFilterChange = (filteredInfo: FilteredInfo) => {
    this.state = {
        filteredInfo
    }
}
public render() {
    filters.props.onSingleFilterChange = this.handleSingleFilterChange
    return (
        <div className={'filter-dropdown'}>
           {filters}
        </div>
    )
}

我收到以下错误： filters.tsx:36 Uncaught TypeError：无法分配给对象“#”的只读属性“onSingleFilterChange”

有没有办法使属性可写？

3个回答

好的，我最终改变了我的逻辑，这样我就可以将 handleSingleFilterChange 移动到索引，然后不需要做任何黑客的事情。

Gioia Fueter
2020-01-07

要回答您的问题是

How to update a property of a component which has been passed itself as a property

检查 如何将道具传递给 {this.props.children

您可以在此处使用 React.cloneElement() ，请参阅 https://reactjs.org/docs/react-api.html#cloneelement

像这样 

const newFilters = React.cloneElement(
  this.props.filters,
  {onSingleFilterChange: this.handleSingleFilterChange},
);
return (
  <div className={'filter-dropdown'}>
    {newFilters}
  </div>
)
Tripurari Shankar
2020-01-07

如果过滤器尚未渲染，那么您可以这样做 

<div className={'filter-dropdown'}>
  <filters onSingleFilterChange = {this.handleSingleFilterChange}>
</div>

否则无需重写 props，您可以将值直接写入对象的任何属性 

filters.onSingleFilterChange = this.handleSingleFilterChange
Dmitry Reutov
2020-01-07