React：如何从组件的 state 设置`dangerouslySetInnerHTML`？

Question

I'm new to React and am working on an already-existing component that seems a bit old.

I have a label element I want to set dynamically, depending on state. To this affect I have:

export default class Address extends React.Component {
 // Props and other handlers

    componentTitle() {
        if (this.state.isPostal) {
            return this.state.labels.PostalAddressLabel
        }
        else {
            return this.state.labels.StreetAddressLabel
        }
    };

   render() {
      return (
        <div className="block">
            <div className="grid-x">
                <div className="input-field cell">
                    <label 
                        dangerouslySetInnerHTML={{ __html: componentTitle() }} 
                    />

        // Other elements
   }
}

However, this does not work. I get the error

Uncaught ReferenceError: componentTitle is not defined

I've tried various combination of this including

• Using a var const compTitle = componentTitle() {

• placing the function within the render() function

• And removing the function altogether and putting the if/else condition in the render() function, eg:

   if (this.state.isPostal) { const compTitle = this.state.labels.PostalAddressLabel } else { const compTitle = this.state.labels.StreetAddressLabel } return ( <div className="block"> <div className="grid-x"> <div className="input-field cell"> <label dangerouslySetInnerHTML={{ __html: compTitle }}

But I just can't get it to work.

Could anyone point me in the right direction?

Answer 1

In this code:

 if (this.state.isPostal) {
   const compTitle = this.state.labels.PostalAddressLabel
 }
 else {
   const compTitle = this.state.labels.StreetAddressLabel
 }

You the variable compTitle only lives within the scope it's defined - which is between the curly braces. So, after the if statement, that variable no longer exists.

I suspect you want something like this:

 const compTitle = this.state.isPostal
      ? this.state.labels.PostalAddressLabel
      : this.state.labels.StreetAddressLabel

 return (
     <div className="block">
         <div className="grid-x">
             <div className="input-field cell">
                 <label>{compTitle}</label>

Answer 2

Easiest way to do this is the using ternary operator.

export default class Address extends React.Component {
 // Props and other handlers

    render() {
        const { isPostal, labels } = this.state;
        const compTitle = isPostal ? labels.PostalAddressLabel : labels.StreetAddressLabel;
        return (
            <div className="block">
                <div className="grid-x">
                    <div className="input-field cell">
                        <label 
                            dangerouslySetInnerHTML={{ __html: compTitle }} 
                        />

            // Other elements
        )
    }
}

Answer 3

use this keyword this.componentTitle()