React Native多组件函数导入使用：拆分后报'updateText只读'错误

Let's break down what's going wrong here and fix it step by step.

Why you're seeing the "updateText is read only" error #

When you split updateText into its own file and imported it into your components, you’re dealing with ES module imports which are read-only bindings. In your AComponent constructor, you tried to reassign the imported updateText variable with updateText = updateText.bind(this) — this violates the read-only nature of module imports, hence the error.

But even if that didn’t throw an error, your approach wouldn’t work anyway: when BComponent calls updateText(text), the this inside updateText would point to BComponent's instance, not AComponent's. So this.setState would try to update BComponent's state, not A's — which isn’t what you want.

The React way to fix sibling component communication #

The correct pattern here is to lift state up to the parent component (SiblingToSibling), then pass down the state and update functions as props to your child components. This keeps your state management predictable and follows React’s one-way data flow.

Modified code with proper state lifting #

Let's rewrite your components correctly:

1. AComponent.js

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

export default class AComponent extends React.Component {
  render() {
    // Destructure props for cleaner code
    const { textViewA, updateTextViewA, changeTextMainT } = this.props;
    
    return(
      <View>
        <Text>{textViewA}</Text>
        <TextInput 
          onChangeText={(text) => updateTextViewA(text)} 
          value={textViewA} 
        />
        <Button title="Click A" onPress={changeTextMainT} />
      </View>
    );
  }
}

2. BComponent.js

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

export default class BComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { TextViewB: 'This is B Component' };
  }

  render() {
    const { updateTextViewA } = this.props;
    
    return (
      <View>
        <Text>{this.state.TextViewB}</Text>
        <TextInput 
          onChangeText={(text) => { 
            this.setState({ TextViewB: text });
            // Call the parent-provided function to update A's state
            updateTextViewA(text);
          }} 
          value={this.state.TextViewB}
        />
      </View>
    )
  }
}

3. SiblingToSibling.js (parent component)

import React from 'react';
import { View, Text, TextInput } from 'react-native';
import AComponent from './AComponent';
import BComponent from './BComponent';

export default class SiblingToSibling extends React.Component {
  constructor(){
    super();
    this.state = { 
      textMain: 'Init',
      textViewA: 'This is A Component' // Lift A's state to parent
    };
  }

  changeTextMain = () => { 
    this.setState({ textMain: "Success" }) 
  }

  // Define the update function for A's state here
  updateTextViewA = (text) => {
    this.setState({ textViewA: text });
  }

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

Key improvements here: #

• We removed the standalone updateText file entirely — it’s not needed with proper state lifting.
• AComponent's state is now managed by its parent, so both A and B can access/update it via props.
• No more trying to modify read-only module imports, and this context is properly handled through parent-provided functions.

内容的提问来源于stack exchange，提问作者Thanh Bình Bùi