react 中,父组件如何调用子组件的方法,或者有没有可能设置子组件的state(不用redux)

如题想请教一下大家,react中,父组件有没有办法调用子组件的方法,或者设置子组件的state。谢谢!

阅读 16.4k
3 个回答

当然可以啦====我们需要使用props来传递啊---redux 产生的根本就在于状态控制太多,不易管理,才用redux嘛。。而且一般情况下,也不推荐用redux。能用用react本身的状态做的,尽量本身来控制。就是一个项目里面你如果倔强,是完全可以不用redux来帮你管理复杂状态的---请看一下redux的三大原则吧--
一般情况 这样控制字组件的状态

中午看了一下这片文章,推荐给你

<Recommend 
                selected_tag={this.state.selectTags}
                screeningItems={this.state.screeningItems}
              /> 
               <RecommendLi
          key={index}
          tagData={item}
          resetHangye={this.resetHangye.bind(this)}
          selectedTag={this.props.selected_tag[item.name] || []}
          selectCallback={this.selectCallback}
        />
        
        <div className={Style.licenter}>
        <div className={Style.title}>{this.props.tagData.title}</div>
        <ul className={Style.ul}>
          {
            this.props.tagData.values.map((item, index)=>{
              return  (
                <li 
                  key={index}
                  className={this.state.selectTag.indexOf(index) > -1 ? Style.active : Style.li}
                  onClick={()=>this.handleClick(item, index)}
                >{item.tagName}</li>
              )
            })
          }
        </ul>
      </div>  

父组件为子组件设置 refs, 可以获取到子组件对象, 也就可以调用子组件的内部方法.

// Child
class Child extends Component {
    childFunction() {}
}

class Parent extends Component {
    // 调用
    parentFunction() {
        this.child.childFunction();
    }

    render() {
        return (
            <Child ref={(child) => { this.child = child; }} />
        );
    }
}

父组件调用子组件的方法,一般使用refs,子组件调用父组件一般采用callback.
下面的例子是父组件调用子组件的方法:

class Parent extends React.Component {
    render() {
        return(
            <div>
                <Child ref={r => this.child = r}/>
            </div>
        );
    }
    
    myFunction() {
        this.child.childFunction();
    }
}

class Child extends React.Component {
    render() {
        //....
    }
    
    childFunction() {
    
    }
}

注意的是,stateless写法中没有refs.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏