reactjs - 如何在两个组件的原生反应中导入和使用函数？

Question

当我将代码放在一个文件中时，一切正常。但是当我将组件拆分为两个单独的文件时出现错误

"Error: 'updateText' is read only".

我的代码在一个文件中：

import React from 'react';
import {
  Text,
  View,
  TextInput,
  Button
} from 'react-native';

function updateText(TextViewA) {
  this.setState({ TextViewA })
}

class AComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TextViewA: 'This is A Component'
    };
    updateText = updateText.bind(this);
  }
  render() {
    return(
      <View>
        <Text>{this.state.TextViewA}</Text>
        <TextInput
          onChangeText={(text) => this.setState({TextViewA: text})}
          value={this.state.TextViewA}
        />
        <Button
          title="Click A"
          onPress={() => {this.props.changeTextMainT()}}
        />
      </View>
    );
  }

}

class BComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state={TextViewB: 'This is B Component'}
  }
  render() {
    return (
    <View>
      <Text>{this.state.TextViewB}</Text>
      <TextInput
        onChangeText={(text) => {
        this.setState({TextViewB: text});
        updateText(text)}
        }
        value={this.state.TextViewB}
      />
      </View>
    )
  }
}

export default class SiblingToSibling extends React.Component {
  constructor() {
    super();
    this.state = {
      textMain: 'Init'
    };

    this.changeTextMain = this.changeTextMain;
  }

  changeTextMain = () => {
    this.setState({
      textMain: "Success"
    })
  }
  render() {
    return (
      <View>
        <AComponent
          changeTextMainT={this.changeTextMain}
        />
        <BComponent />
        <Text>{this.state.textMain}</Text>
        <TextInput
          onChangeText={(text) => {
            this.setState({
              textMain: text
            })
          }}
        />
      </View>
    );
  }
}

当我像这样拆分组件时的代码：
---UpdateText---

export default function updateText(TextViewA) {
  this.setState({
    TextViewA
  })
}

---A组件---

class AComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TextViewA: 'This is A Component'
    };
    updateText = updateText.bind(this);
  }
  render() {
    return ( <
      View >
      <
      Text > {
        this.state.TextViewA
      } < /Text> <
      TextInput onChangeText = {
        (text) => this.setState({
          TextViewA: text
        })
      }
      value = {
        this.state.TextViewA
      }
      /> <
      Button title = "Click A"
      onPress = {
        () => {
          this.props.changeTextMainT()
        }
      }
      /> <
      /View>
    );
  }

}

---兄弟对兄弟----

import updateText from './updateText';
    
    class BComponent extends React.Component{
      constructor(props){
        super(props);
        this.state={
          TextViewB: 'This is B Component'
        }
      }
      render(){
        return (
          <View>
            <Text>{this.state.TextViewB}</Text>
            <TextInput 
              onChangeText={(text)=> {this.setState({TextViewB:text});updateText(text)}}
              value={this.state.TextViewB}/>
          </View>
        )
      }
    }
    
    export default class SiblingToSibling extends React.Component{
      constructor(){
        super();
        this.state = {
          textMain:'Init'
        };      
        this.changeTextMain= this.changeTextMain;
      }
    
      changeTextMain = ()=>{
        this.setState({textMain:"Success"})
      }
      render(){
        return(
          <View>        
            <AComponent changeTextMainT={this.changeTextMain}/>
            <BComponent />
            <Text>{this.state.textMain}</Text>
            <TextInput
              onChangeText = {(text)=> {this.setState({textMain:text})}}
            />
          </View>
        );
      }
    }

我看不出我做错了什么。你能帮我么？

标签： reactjsreact-nativereact-router