javascript - 在我的组件中使用 React、ES6 渲染状态

Question

我正在学习 React，并选择使用 ES6 创建一个示例简历应用程序。

这是我在 App.js 中的代码示例

class ContentBlock extends React.Component {
    constructor(props) {
      super(props);
      this.state = { heading: '', body: '' };
    }
    setText() {
      this.setState({ heading: "I'm Daniel", body: "I am about to be twenty seven years old" });
    }
    componentDidMount() {
      {this.setText.bind(this)}
    }
    render() {
      return (
        <Media>
          <Media.Left>
            <Image src={this.props.src}/>
          </Media.Left >
          <Media.Heading>{this.state.heading}</Media.Heading>
          <Media.Body>
            <p>{this.state.body}</p>
          </Media.Body>
        </Media>
      );
    }
  }

我结合使用了这三个教程。

Official React ES6 tutorial

BabelJs tutorial for React ES6

Kirupa Tutorial on React

除了 ESLint 上的警告之外，我没有遇到任何错误，但文本未呈现。

＃＃＃＃＃更新

this.props.src 来自使用 ContentBlock 作为子组件的组件

class About extends Component {
  render() {
    return (
      <div>
        <ContentBlock src={danrubio} />
      </div>
    );
  }
}

我指定图像并将其传递到 ContentBlock 将继承的 About 组件。

Answer 1

所有这条语句:this.setText.bind(this)所做的，只是将setText函数绑定(bind)到上下文，但不调用它。更重要的是，您将其绑定(bind)到它已有的相同上下文。这里不需要绑定(bind)。

只需更改此:

componentDidMount() {
  {this.setText.bind(this)}
}

致:

componentDidMount() {
  this.setText()
}