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

我最终得到了这个：

CoreApplicationViewTitleBar titleBar = CoreApplication.GetCurrentView().TitleBar;
titleBar.LayoutMetricsChanged += TitleBar_LayoutMetricsChanged;

private void TitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    AppTitle.Margin = new Thickness(CoreApplication.GetCurrentView().TitleBar.SystemOverlayLeftInset + 12, 8, 0, 0);
}

关键是我用另一个跨度包裹span + text。它在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>
);

你获得了智力感知。它是可重复使用的，您可以单独导出每个组件进行测试。如果您不想使用三元运算符，那么您可以使用重构branch()函数，但这更为先进。

如何重用JSX元素？

3 个答案: