Question

我想在React组件的唯一函数中简化“ renderTitle”和“ renderComments”：

renderTitle(dish) {
    return (
      <h2>
        Title array comment
      </h2>
    );
}
renderComments(dish) {
    return (
      dish.array.map(comment => {
        return (
          <div>
             hello
          </div>
        );
      })
    );
}
render() {
  return (
     {this.renderTitle(this.props.dish)}
     {this.renderComments(this.props.dish)}
  );
}

Answer 1

看看下面的代码，其中我使用了Fragment（反应16.x）。并查看我如何合并您所提出问题中的功能。

renderItems(dish) {
    const comments = dish.array.map(comment => (<div>hello</div>))
    return (
    <React.Fragment>
        <h2>
            Title array comment
        </h2>
       {comments}
    </React.Fragment>
);}

Answer 2

要在JSX中间使用常规JavaScript表达式，必须将JavaScript表达式包装在{}中。

请注意，要返回同一级别的多个元素，您应该返回一个数组或将它们包装在Fragment中：

render() {
  return (
      <React.Fragment>
        <h2>
          Title array comment
        </h2>
        {
          dish.array.map(comment => (
            <div>
               hello
            </div>
          ));
        }
      </React.Fragment>
  );
}

Answer 3

如果this.props.dish是数组，则可以执行此操作。

renderTitle(dish) {
    return dish.map(i => {
        return <div>{i.title}</div>;/*this title may change*/
    });
}
renderComments(dish) {
    return dish.map(i => {
        return <div>{i.comment}</div>;/*this comment may change*/
    });
}
render() {
    return (
        <div>
            {this.renderTitle(this.props.dish)}
            {this.renderComments(this.props.dish)}
        </div>
    );
}

绘制div及其标题的地图

3 个答案: