React Native出现不可达代码警告及语法问题求助

嘿，我来帮你排查这两个问题：

1. 不可达代码错误的原因 #

React组件的render方法必须返回单个根元素，你现在直接返回了<Form>和<ButtonSubmit>两个同级元素，这会让React解析器认为<ButtonSubmit>属于合法返回结构之外的代码，因此标记为不可达。

解决办法很简单：把这两个组件包裹在一个容器里，比如用普通的<div>，或者更简洁的React Fragment（<>和</>，不会额外生成DOM节点）。

2. " :expected" 警告的根源 #

这个警告其实是第一个问题引发的连锁反应——因为JSX结构不合法，解析器无法正确识别this.state.username的语法，所以抛出了预期之外的错误提示。另外我还注意到你changeFirst方法里的参数拼写错误：reaceivedPW少了一个字母v，应该是receivedPW，这个小错误会导致后续状态更新无法正确赋值，也需要修正。

额外提个优化点：每次在render里用bind(this)会导致组件每次渲染都创建新的函数实例，建议在constructor里提前绑定方法，性能会更好。

修正后的完整代码 #

import React, {Component} from 'react'; 
import ButtonSubmit from './ButtonSubmit';
import Form from './Form';

export default class ParentofButtonandForm extends Component { 
  constructor() { 
    super(); 
    this.state = { 
      username: '', 
      password : '', 
    };
    // 提前绑定方法，避免每次render重复创建函数实例
    this.changeFirst = this.changeFirst.bind(this);
  } 

  changeFirst(receivedUN, receivedPW) { 
    this.setState({ 
      username: receivedUN, 
      password: receivedPW 
    }); 
  } 

  render() { 
    // 用Fragment包裹子组件，解决根元素限制问题
    return (
      <>
        <Form 
          username={this.state.username} 
          password={this.state.password} 
          changeFirst={this.changeFirst}
        />
        <ButtonSubmit 
          username={this.state.username} 
          password={this.state.password}
        />
      </>
    ) 
  } 
}

这样修改后，两个错误应该都会消失啦。另外记得在你的Form组件里，要正确调用props.changeFirst来传递用户名和密码哦。

内容的提问来源于stack exchange，提问作者PuskarShestha