您将如何修复或改进组件？

Question

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

通过执行以下内容删除状态并使用道具？ 如果是这样，您如何做？

getDerivedStateFromProps

或（最好）更改功能组件？

期待建议！

Answer 1

在这里，您将获得一个单行无状态组件：

const App = ({ name }) => <p>Hello {name || 'Anonymous'}</p>

它的行为与您的课堂完全相同