如何在React的render方法中调用自定义方法xxx？

Hey Mariela! Welcome to React—great question, this is something a lot of new devs stumble on at first. Let's get this sorted for you.

1. Invoke the Method Directly in Render #

Your xxx() method returns JSX, so you can call it directly within the JSX of your render() method using curly braces {}. Here's how that looks in context:

class YourComponent extends React.Component {
  // Initialize your state (adjust with your actual data)
  state = {
    dataLoadedQuote: false,
    blogQuote: {} 
  };

  // Your custom method as provided
  xxx() {
    return (
      this.state.dataLoadedQuote && 
      <BlogBandLeadershipBlogQuoteItem 
        item={this.state.blogQuote} 
        labels={this.props.labels} 
      />
    );
  }

  render() {
    return (
      <div className="component-container">
        {/* Call your method right here */}
        {this.xxx()}
        
        {/* Add other JSX content for your component here */}
      </div>
    );
  }
}

2. Fix this Binding (Critical!) #

Since your method uses this.state and this.props, you need to make sure this refers to your component instance when the method runs. There are two easy ways to handle this:

• Option 1: Use an Arrow Function for Your Method
  Arrow functions automatically bind this to the component, so you don't have to do extra work:

  xxx = () => {
    return (
      this.state.dataLoadedQuote && 
      <BlogBandLeadershipBlogQuoteItem 
        item={this.state.blogQuote} 
        labels={this.props.labels} 
      />
    );
  }
  

• Option 2: Bind the Method in the Constructor
  If you prefer not to use arrow functions, explicitly bind the method in your component's constructor:

  constructor(props) {
    super(props);
    this.state = {
      dataLoadedQuote: false,
      blogQuote: {}
    };
    // Bind the method to the component instance
    this.xxx = this.xxx.bind(this);
  }
  
  xxx() {
    // Your original method code here
  }
  

3. Quick Note on the Conditional Rendering #

The && operator in your method is a neat React trick: if this.state.dataLoadedQuote is true, it will render the <BlogBandLeadershipBlogQuoteItem> component. If it's false, it will render nothing (which is totally safe in React).

That's all you need! Once you set this up, your component will render the quote item whenever dataLoadedQuote is true.

内容的提问来源于stack exchange，提问作者Mariela