Question

我正在编写一个React组件，试图将App函数中的名称提取到Welcome中，因此应显示Hello，Sara / Hello，Jone和Hello，David。当前，它只显示为Hello，而未以Hello命名。

我正在将该组件导入同一文件夹中的其他主文件中。

这是代码

import React from "react";
import ReactDOM from "react-dom";

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Jone" />
      <Welcome name="David" />
    </div>
  );
}

export default Welcome;

Answer 1

该组件仅呈现Hello,的原因是因为您当前正在从模块中导出Welcome组件。

改为导出App组件，它将按预期工作。

export default App;

从功能中提取道具到React中的组件

1 个答案: