在我的組件中使用React，ES6渲染狀態

Question

我正在學習反應，我選擇使用ES6創建一個示例簡歷應用程序。

這是我在App.js代碼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>
      );
    }
  }

我正在使用這三個教程的組合。

官方React ES6教程

BabelJs React ES6教程

關於React的Kirupa教程

除了我的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函數綁定到上下文，但不調用它。 更重要的是，您將它綁定到它已有的相同上下文。 這里不需要綁定。

只需改變這個：

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

至：

componentDidMount() {
  this.setText()
}