Question

我发现从父到子组件通过refs传递的参数要么是未定义的，要么是实际事件而不是我传入的事件。

将参数从父组件传递到子组件的函数的正确方法是什么？我正在使用refs，但似乎它并没有真正传递任何函数参数。

我在这里展示案例： https://codepen.io/adamchenwei/pen/gLMaPo/?editors=0010

基本上，如果你看到我写的console.log('child argument should be string');行，它应该是实际传递的参数而不是事件。

我想知道我做错了什么。

对于这种情况，我需要评估父组件中的事件，并决定如何运行子函数，并相应地传入特定参数。

Answer 1

在子组件中访问父道具只有两种方法。你可以通过以下两种方式实现这一目标： -

通过props
将状态值和调度操作中的值设置为从状态获取值。

Answer 2

我不使用ref，而是使用state和props：

parentDoThing(event) {
    const lifeTerms = {
      heaven: 'yeeeeey',
      hell: 'nooooooo',
    }
    if(event) {
      this.setState({ lifeTerms: heaven });
    } else {
      this.setState({ lifeTerms: hell});
    }
}

render() {    
    return (
      <section className="parent-comp"
        onClick={this.parentDoThings}>
        <ChildComponent
          lifeTerms={this.state.lifeTerms}/>
        <h1> Whats in App {this.state.text}</h1>
      </section>
);}

关于儿童部分：

render() {    
    return (
      <section className="child">
        <section>this life is {this.state.life} </section>
        <button onClick={this.doChildThings.bind(this, this.props.lifeTerms)}> Button </button>
      </section>
    );

Answer 3

通过使用componentWillUpdate结合使用父级state并将子级props作为def find_or_create_this attributes = self.attributes.slice('obj_id', 'obj_type') ActiveRecord::Base.transaction(isolation: :read_committed) do BusinessObject.find_or_create_by!(attributes) end rescue ActiveRecord::RecordNotUnique ActiveRecord::Base.transaction(isolation: :read_committed) do BusinessObject.find_by!(attributes) end end传递到子级内来触发事件来解决我的问题，因为我不希望孩子内部有任何触发器触发父母提供的更改。

从reactjs中的父组件调用并传递参数到子组件的函数

3 个答案: