反应和公认的标准

Question

也许不是问这个问题的最佳地点。如果没有，请指出我需要走的路。

我已经开始使用 ReactJS 来更新编程语言，我相信我掌握了基本概念；然而，在学习一门新的编程语言时，我发现了许多不同的做事方式（例如计算机编程的案例）。我想在我的设计中使用一个简单的输入组件：

class TextField extends Component{
  constructor(props,context){
    super(props,context);
    this.state = {errmsg: ''}
    this.setError = this.setError.bind(this);
  }
  setError(errormessage){
    this.setState({
      errmsg: errormessage
    })
  }
  render(){
    var inpdiv = this.props.id + "_div";
    var errdiv = this.props.id + "_err";
    return(
      <div id={inpdiv}>
        <label for={this.props.id}>{this.props.label}
          <input type="text" id={this.props.id} name={this.props.id} />
          <div id={errdiv}>{this.state.errmsg}</div>
        </label>
      </div>
    )
  }
}
export default TextFieldest;

注意 setError 函数。我从另一个（父）组件调用此函数：

class Form extends Component{
  constructor(props,context){
    super(props,context)
    this.emailaddress_ref = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(){
    this.emailaddress_ref.current.setError('Testing the Error Area of the Test Component');
  }
  render(){
    return(
      <div>
        <Test id="emailaddress" ref={this.emailaddress_ref} label="Enter Email Address" />
        <Button btntext="Press Me!" handleclick={this.handleSubmit} />
      </div>
    )
  }
}
export default Form;

我的问题是： 这是处理更改子组件状态的最被接受的方法，还是我在这里走错了路？

Answer 1

您可能更希望通过 props 传递错误函数，因为它将一个组件与另一个组件解耦，并且它不会导致如果您渲染两个或更多组件，您将在处理 refs 的场景中遇到混乱真的不需要它们。 refs 在他们的需求中很少见，虽然你可以按照自己的方式弯曲它们，但通过 props 发送东西要明智得多。一般来说，为可重用组件使用 id 也不是一个好主意。

您需要了解您的情况，例如谁应该处理错误以及处理错误的程度。关于输入验证，您的文本输入是半自主的吗？如果您在其他地方重用，您会相信它的验证应该由父母处理吗？是和否都是有效的答案，但您需要了解谁拥有您应用中的流程。