Question

我想使用父的功能来控制孩子的状态

所以我在parent.jsx中编码这些

changeFilter(){
if(this.state.imgFilter=='none'){
  this.setState({
    imgFilter:'imgFilter',dataFilter:1
  },()=>this.selectFood)
}
else if(this.state.imgFilter=='imgFilter'){
  this.setState({
    imgFilter:'none',dataFilter:0
  },()=>this.selectFood)
}

}

但是我想在parent.jsx中将它放在child.js

中

我怎么能这样做？

Answer 1

父组件

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child filter={this.state.imgFilter} toggleFilter={this._toggleFilter} />
      </div>
    )
  }

  constructor() {
    super()

    this.state = {
      imgFilter: "none",
    }

    this._toggleFilter = this._toggleFilter.bind(this)
  }

  _toggleFilter() {
    this.setState(state => {
      return {
        imgFilter: state.imgFilter === "imgFilter" ? "none" : "imgFilter",
      }      
    })
  }
}

注释

第1行：将父级更改为父级的组件名称
第2行：首先放置render（）的样式。最放 constructor（）首先
第5行：强烈建议缓存您的功能而不是内联它们进入你的渲染功能。这避免了重新创建功能重新呈现
第10-11行：如果在里面使用，只需要构造函数（）/ super（）中的道具构造函数（）
第17行：绑定你的函数
第20行：js约定将下划线放在方法/函数前面那是本地的
第21行：推荐功能setState（）。更严格的国家秩序突变有助于重现性。 object-style setState（）,. 默认情况下，是异步并且可以无序更新状态
第23行：约定更喜欢将“none”作为后备条款，以这种方式订购三元以与原始帖子保持一致

子组件

class Child extends React.Component {
  render() {
    // imgFilter && toggleFilter() are accessible from this.props
    // this.props.imgFilter
    // this.props.toggleFilter()
    // e.g. <div onClick={this.props.toggleFilter()}></div>

    return <div></div>
  }
}

React.js使用Parent的函数来控制Child的状态

1 个答案: