Новое в реакции - как мне go исправить или улучшить этот компонент?

Question

Я новичок в среде React и недавно написал приведенный ниже код, но меня попросили понять, что с ним не так и как я могу улучшить / исправить этот компонент.

Пожалуйста, кто-нибудь может посоветовать лучше способ структурирования этого компонента и почему этот подход? Спасибо!

class App extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name || 'Anonymous'
    }
  }    
  render() {
    return (
      <p>Hello {this.state.name}</p>
    );  
  }
}

Answer 1

Строительство государства не может быть сделано таким образом. Вы должны использовать componentDidMount () и setState (),

componentDidMount() {
 this.setState({
   name: this.props.name
 });
}

Answer 2

Получаете ли вы какой-либо контент со входа или вы просто хотите отобразить это состояние? Если вы просто хотите отобразить это состояние, вы можете просто изменить блок конструктора с помощью state = {name: 'Anonimus'} и вызвать его в своем jsx, как вы это сделали.

Answer 3

Если только name не должен измениться в какой-то момент, ваш компонент не должен быть с состоянием. Просто используйте name prop и используйте defaultProps для предоставления значения по умолчанию:

class App extends React.Component {  
  render() {
    return (
      <p>Hello {this.props.name}</p>
    )
  }
}
App.defaultProps = {name: 'Anonymous'}

На самом деле вам не нужно использовать класс для такого простого компонента:

function App() {
  return (
    <p>Hello {this.props.name}</p>
  )
}
App.defaultProps = {name: 'Anonymous'}

См. Раздел Компоненты функций и классов для получения дополнительной информации о компоненте функциональных и классов.