如何在反应中重用JSX元素？

Question

I don't know separate the code in span and the text appending it

getAuthorInfo() {
    if (this.props.anonymous_author) {
        return <p className="meta-data-type topic-label">{this.props.author.display_name}, {this.props.author.primary_specialty_name}</p>;
    }
    return <p className="meta-data-type topic-label">{this.props.author.display_name}, {this.props.author.primary_specialty_name} <span className="glyphicon glyphicon-map-marker" />{this.props.author.location}</p>;
}

I don't think jsx let me to define a variable to be just and raw text any ideas?

Answer 1

getAuthorInfo() {
  return (<p className="meta-data-type topic-label">
      {this.props.author.display_name}, {this.props.author.primary_specialty_name}
      {!this.props.anonymous_author &&
        (<span className="glyphicon glyphicon-map-marker" />
        {this.props.author.location})}
    </p>);    
}

Answer 2

I ended up with this:

getAuthorInfo() {
    let location;
    if (!this.props.anonymous_author) {
        location = (<span><span className="glyphicon glyphicon-map-marker" />{this.props.author.location}</span>);
    }
    return <p className="meta-data-type topic-label">Top answer from {this.props.author.display_name}, {this.props.author.primary_specialty_name} {location} </p>;
}

The key point is I wrap the span+text with another span. And it's allowed in html, see here: https://stackoverflow.com/a/5545914/5326788

Answer 3

You are thinking about this the wrong way. You shouldn't be returning JSX from functions like this because it's not re-usable and runs into the problems which you are having right now.

All the other answers here are still not testable or re-usable across components.

I don't know how you render at the moment, but let's say you render it like this:

class MyComponent extends React.Component {
    getAuthorInfo() {
        if (this.props.anonymous_author) {
            return <p className="meta-data-type topic-label">{this.props.author.display_name}, {this.props.author.primary_specialty_name}</p>;
        }
        return <p className="meta-data-type topic-label">{this.props.author.display_name}, {this.props.author.primary_specialty_name} <span className="glyphicon glyphicon-map-marker" />{this.props.author.location}</p>;
    }
  render() {
    return (
        <div>
            {this.getAuthorInfo()}
        </div>
    );
  }
}

Becomes this:

const MyComponent = () => <AuthorInfo />;

const AuthorInfo = (props) => (
  <p className="meta-data-type topic-label">
    {props.author.display_name}, {this.props.author.primary_specialty_name}

    {!props.anonymous_author ? <AnonymousAuthor author={props.author} /> : null}
  </p>
);

const AnonymousAuthor = (props) => (
  <div>
    <span className="glyphicon glyphicon-map-marker" />
    {props.author.location}
  </div>
);

You gain intellisense. It's re-usable and you can export each component to test easily in isolation. If you don't want to use ternary operators then you can use recompose branch() function but this is more advanced.