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

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

这里的问题在于您并不真正了解道具在React中的工作原理（但是没关系！

一般意义上的道具是您从parent组件传递到child组件的东西

假设您有一个如下的节点图：

Text
  |
   - Hello

在Hello是Text的子代的情况下（如您的示例所示），Hello的道具将从其父级组件Text传递。

因此，在您的情况下，如果您想使用道具，则需要更改此内容：

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>
      );
  }
}

这样，您根本不需要使用道具。

为什么要使用道具？

道具是一种能够更新组件数据的好方法。

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

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

我什么时候不使用道具？

几乎不会。在大多数情况下，您希望使用道具传递属性（除非特定属性永远不会改变）。这是为了确保所有组件都可重用。

Answer 2

props是在React中传递给孩子的东西。在Hello组件中，您正在传递this.props.but，但是but未传递到组件中。 this.props.but是undefined。

如果您在本地定义了but，则只需传递该变量即可：

return(
    <h1>{but}</h1>
);

或者，如果您确实想使用this.props.but，则可以通过将but传递到text组件中来使用道具。

<div>
    <Hello but={'helloooo'} />
</div>