Question

我正在学习反应，我选择使用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>
    );
  }
}

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

Answer 1

所有这些陈述：this.setText.bind(this)确实只是将setText函数绑定到上下文，但不会调用它。更重要的是，您将它绑定到它已有的相同上下文。这里不需要绑定。

只需改变一下：

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

要：

componentDidMount() {
  this.setText()
}

在我的组件中使用React，ES6渲染状态

1 个答案: