时间戳

首页 > 解决方案 > 仅在子组件中使用道具是不好的做法吗？没有自己状态的子组件

javascript - 仅在子组件中使用道具是不好的做法吗？没有自己状态的子组件

问题描述

我正在开发一个应用程序，我开发的所有子组件都没有自己的状态。如果不是，则是父容器通过 props 传递状态，子容器通过回调修改 props。我知道这对于简单的组件是正常的，但是我让一些没有状态的组件变得更复杂一些，我不知道这是不是不好的做法。我举个例子，虽然没有多大意义，但是看到child有逻辑，修改props但没有自己的state。

父组件

class Form extends React.Component {
  constructor(){
    super();
     this.state = {
      person: {
        name: 'Jonh',
        surname: 'Bold',
        money: 20
      },
      expenses: 0
    }
    this.handleChangePerson = this.handleChangePerson.bind(this);
    this.handleChangeExpenses = this.handleChangeExpenses.bind(this);
  }
 
  handleChangePerson(value){
    this.setState({person: {...this.state.person, ...value }})
  }
  
  handleChangeExpenses(event){
    this.setState({expenses: event.target.value })
  }

  render() { 
    return (
      <div>
        <h1>Personal Information</h1>
        <PersonalInformation person={this.state.person} expenses={this.state.expenses} handleChange={this.handleChangePerson} />
        <h1>Expenses</h1>
        <input type="number" name="expenses" onChange={this.handleChangeExpenses} />
        <h1>Total money: {this.state.person.money} </h1>
      </div>)
  }

};

子组件

class PersonalInformation extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  
  componentDidUpdate(prevProps){
    if(prevProps.expenses !== this.props.expenses){
      this.props.handleChange({money: this.props.person.money - this.props.expenses})
    }
  }
  handleChange(){
    let {name, value} = event.target;
    if(name === 'money'){
      value = parseInt(value, 10);
      value = value >= 100 || value < 0 ? 99 : value 
    }
    this.props.handleChange({ [name]: value})
  }
  render() {
    return (
      <div>
        <p>Name: <input type="text" name="name" value={this.props.person.name} onChange={this.handleChange} /></p>
        <p>Surname: <input type="text" name="surname" value={this.props.person.surname} onChange={this.handleChange} /></p>
        <p>Money: <input type="number" name="money" value={this.props.person.money} onChange={this.handleChange} /></p>
    </div>)
  }

};

也许这不是最好的例子，但我想展示的是，让稍微复杂的子组件没有状态来修改父组件的状态是否是不好的做法。或者最好有一个有自己状态的组件不直接修改父级。谢谢！

标签： javascriptreactjs

解决方案

不，还不错。

有时这是最简单的做法。另一种方法将涉及上下文：https ://reactjs.org/docs/context.html 或 Redux：https ://redux.js.org/api/api-reference

推荐阅读