Reactjs 在react native中以编程方式注入属性

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

下面是应用程序容器组件代码

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

及

FormItemText扩展组件{
render（）{
返回(
this.props.saysomething（text）}
)
}
}

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

---

谢谢

您必须使用

直接操作

以编程方式注入属性

首先将

ref

属性添加到

FormItemText

组件中

创建一个函数，在

TextInput.onChangeText

上调用

setNativeProps

完成了 请注意，

direct manipulation

是计算密集型的-React需要在每次不透明度更改时重新渲染组件层次结构，即使视图及其子对象的其他属性没有更改。通常，这种开销并不重要，但在执行连续动画和响应手势时，明智地优化组件可以提高动画的逼真度

---

有关更多信息和示例，请阅读React本机文档。

我们会做一些与您要求的类似的事情

我们有一个表单组件，它接受多个FormInput作为子项：

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

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

我们使用React上下文来执行此操作

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

<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,
};

FormItem扩展组件{
getChildContext（）{
return{saysomething:this.saysomething}；
}
说点什么{
log（“说点什么”）
}
render（）{
返回(
{this.props.children}
)
}
}
FormItem.childContextTypes={
说点什么：PropTypes.func，
};
FormItemText扩展组件{
render（）{
返回(
this.context.saysomething（text）}
)
}
}
FormItemText.contextTypes={
说点什么：PropTypes.func，
};

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

<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,
};