javascript - 返回时有错误(我不明白为什么

Question

import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

class MyStories extends React.Component {


  addFavorite = (e) => {
    this.setState({
      bgcolor: "blue"
    })
  }


  render () {
  const { stories }  = this.props;
    const { storyBriefs }  = this.props.stories.length > 0 ?

          stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

//refactor - create a button that will allow for us to mark which our favorites are

  return (
    { this.props.storyBriefs }
   );
  }

 }
const mapStateToProps = state => {
  return {
    stories: state.myStories
  }
 }


export default connect(mapStateToProps)(MyStories)

出现此错误

./src/components/MyStories.js 第 26 行:解析错误:意外的标记，应为“:”

    return (
      ^
   { this.props.storyBriefs }
  );
 }

<小时/>

我将功能组件转换为类组件，以便我可以操纵状态以更改最喜欢的按钮的颜色 - (我不能对按钮功能使用钩子(Hook)或 redux)任何人都可以告诉我我是什么做错了吗？

Answer 1

您需要通过添加来完成三元运算符:

 const storyBriefs  = this.props.stories.length > 0 ?

          stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

: [] // you need something here after the ':', an empty array could be useful in this case

 return storyBriefs

或者你可以将其缩短为

 return stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))