javascript - 导出组件时文档不显示任何内容

Question

几天前我开始学习 React 并尝试显示一些简单的文本。目标是拥有组件 button使用来自 Hello 的数据吐出文字hello world 。然而，什么也没有显示。

此 React 项目是使用 create-react-app 创建的

App.js 文件:

import React, { Component } from 'react';

class text extends Component {
  render(){
    return(
      <div>
        <Hello />
      </div>
      );
  }
}

class Hello extends Component {
  render(){
    const but = <h1>hello world</h1>;

    return(
        <h1>{this.props.but}</h1>
      );
  }
}

export default text;

index.js 文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

我预计<Hello />标签 text组件将传输组件 Hello 的数据通过this.props ，但显然我错了。如果您能提供详细的答复，我们将不胜感激。

Answer 1

这里的问题在于你并不真正理解 props 在 React 中是如何工作的(但这没关系!)

一般意义上的 Props 是从父组件传递给子组件的内容

假设您有一个如下所示的节点图:

Text
  |
   - Hello

如果 Hello 是 Text 的子级(如您的示例中所示)，则 Hello 的 props 将从 Text，其父组件。

因此，在您的情况下，如果您想使用 Prop ，则需要更改此设置:

import React, { Component } from 'react';

class text extends Component {
  render(){
    return(
      <div>
        <Hello but="Hello World"/>
      </div>
      );
  }
}

class Hello extends Component {
  render(){
    return(
        <h1>{this.props.but}</h1>
      );
  }
}

export default text;

另一种方法是将组件更改为:

class Hello extends Component {
  render(){
    const but = "Hello world";
    return(
        <h1>{but}</h1>
      );
  }
}

这样，您就根本不需要使用 props。

为什么要使用 Prop ？

Props 是更新组件数据的好方法。

假设您有一个当前正在显示“Hello World”的组件。您如何告诉它将文本更改为“再见世界”？

通过 props，只要属性(props 是properties 的缩写)更新，组件就会自动重新加载并再次渲染，始终使用最新的属性进行渲染。您可以使用它来更新渲染的内容。

什么时候不使用 Prop ？

几乎从来没有。大多数时候，您希望通过 props 传递属性(除非该特定属性永远不会改变)。这是为了确保所有组件都可以重用。