Question

我想知道如何将属性注入组件的对象。

以下是App Container组件代码

<FormItem element={<FormItemText />} />

以下是2个组件。

FormItem extends Component {

  saysomething(){
    console.log("Saying something")
  }

  render(){
    return (
      {this.props.element}
    )
  }

}

和

FormItemText extends Component {

  render(){
    return (
      <TextInput onChangeText={(text) => this.props.saysomething(text)}
    )
  }

}

如何将FormItem.saysomething作为属性传递给FormItemText组件。

由于

Answer 1

您必须使用direct manipulation以编程方式注入属性。

首先在ref组件中添加FormItemText属性。
创建一个功能，在setNativeProps。

TextInput.onChangeText

完成！

请注意direct manipulation是计算密集型的 - 每次不透明度发生变化时，React都需要重新渲染组件层次结构，即使视图及其子项的其他属性没有改变也是如此。通常这种开销并不是一个问题，但在执行连续动画和响应手势时，明智地优化组件可以改善您的动画效果。保真度。

有关更多信息和示例，请阅读React Native Documentation here。

Answer 2

我们会做一些类似于你问的事情。

我们有一个Form组件，它接受许多FormInputs作为子项：

<Form>
  <FormInput />
  <FormInput />
</Form>

Form需要为FormInput提供一些函数和属性。例如，FormInput可能需要在聚焦时滚动父窗体。

我们使用React上下文执行此操作 https://facebook.github.io/react/docs/context.html

在你的例子中，它最终会看起来像这样：

<FormItem>
    <FormItemText />
</FormItem>

FormItem extends Component {
  getChildContext() {
    return { saysomething: this.saysomething };
  }

  saysomething(){
    console.log("Saying something")
  }

  render(){
    return (
      {this.props.children}
    )
  }
}
FormItem.childContextTypes = {
  saysomething: PropTypes.func,
};

FormItemText extends Component {    
  render(){
    return (
      <TextInput onChangeText={(text) => this.context.saysomething(text)}
    )
  }
}
FormItemText.contextTypes = {
  saysomething: PropTypes.func,
};

以反应原生方式以编程方式注入属性

2 个答案: