从函数中提取 props 到 React 中的组件中答案

【问题标题】：extract props from function into components in React从函数中提取 props 到 React 中的组件中
【发布时间】：2018-08-03 11:58:24
【问题描述】：

我正在编写一个反应组件，我试图从 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;

【问题讨论】：

您正在导出Welcome 组件。你不想导出App 并使用它吗？
因为是导出Welcome组件，所以需要导出App组件，export default App;
我认为@Tholle 是正确的，因为代码工作正常，否则：jsfiddle.net/reactjs/69z2wepo
嗨，Tholle，你是对的，谢谢

标签： javascript reactjs

【解决方案1】：

组件只渲染Hello,的原因是因为您当前正在从模块中导出Welcome组件。

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

export default App;

【讨论】：