如何在 React 中重用 JSX 元素？

Question

我不知道将 span 中的代码和附加它的文本分开

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>;
}

我认为 jsx 不允许我将变量定义为纯文本 有什么想法吗？

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

我最终得到了这个：

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>;
}

关键是我用另一个跨度包装了跨度+文本。它在 html 中是允许的，请参见此处： https://stackoverflow.com/a/5545914/5326788

Answer 3

你想错了。您不应该从这样的函数中返回 JSX，因为它不可重用并且会遇到您现在遇到的问题。

这里的所有其他答案仍然不可测试或跨组件重复使用。

目前我不知道你是如何渲染的，但假设你是这样渲染的：

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>
    );
  }
}

变成这样：

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>
);

你获得智能感知。它是可重复使用的，您可以导出每个组件以轻松进行单独测试。如果您不想使用三元运算符，则可以使用 recompose branch() 函数，但这更高级。