javascript - 从函数中提取 props 到 React 中的组件中

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;