Question

我在提升状态并将组件转换为功能时遇到麻烦。我的代码有什么问题。

说明：1：在JS部分中，创建一个名为App的类组件。在其render()方法内部，使它返回Welcome组件。在ReactDOM.render()方法中，将Welcome更改为App。

2：将状态从Welcome组件提升到App，以便在App的构造函数中初始化状态。

3：将Welcome组件转换为返回与以前相同的欢迎消息的函数组件。您需要将bootcampName的{{1}}状态属性传递给App组件。是否解构取决于您。

Welcome

Answer 1

您在那里有一些错误

您需要关闭欢迎组件。
您需要命名道具
由于this.state在那里不存在而破坏道具。

代码在这里：

 class App extends Component {
        constructor(props) {
          super(props);
          
          this.state = {
            bootcampName: "Nucamp"
          };
        }
            render() {
              return (
                  <div className="App">
                     { /**
                       *  you need to close the Welcome Component 
                       *  you need to name the prop
                       */}
                  <Welcome  bootcampName={this.state.bootcampName}/>;
                  </div>
              );
          };
      }
        // Here destruct props to use it 
      function Welcome({bootcampName}) {
          return (
            <h1>Welcome to {bootcampName}!</h1>
          );
        }
      
      
      ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

命名道具：

<div className="App">
    <Welcome bootcampName={this.state.bootcampName} />
</div>

Answer 3

使用功能组件时，不再需要使用this。尝试这样做：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      bootcampName: "Nucamp"
    };
  }
  render() {
     return (
        <div className="App">
          <Welcome bootcampName={this.state.bootcampName}>;
        </div>
    );
  }
}
function Welcome({bootcampName}) {
  return (
    <h1>Welcome to {bootcampName}!</h1>
  );
}

提升状态和功能组件

3 个答案: