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

我将功能组件转换为类组件，以便可以操纵状态以更改收藏夹按钮的颜色-（我不能将钩子或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>))

Answer 2

正如Jaromanda X所说{{this.props.storyBriefs}无效。您需要提供键值对，除非该变量没有点号，然后您可以像这样定义对象

Answer 3

这是最终的代码，它可以工作，

import React from "react"
import { connect } from "react-redux"
import { Link } from "react-router-dom"

class MyStories extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      button: false
    };
    this.addFavorite = this.addFavorite.bind(this);
  }

  addFavorite = id => {
    this.setState({
      button: id
    });
  };

  render() {
    return this.props.stories.map(t => (
      <div className="menu-inner-container">
        <p key={t.id}>
          <Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
          <button
            key={t.id}
            className={this.state.button===t.id ? "buttonTrue" : "buttonFalse"}
            onClick={() => this.addFavorite(t.id)}
          >
            Favorites
          </button>
        </p>
      </div>
    ));
  }
}

//refactor - create a button that will allow for us to mark which our favorites are
const mapStateToProps = state => {
  return {
    stories: state.myStories
  };
};

export default connect(mapStateToProps)(MyStories);

退货有误（我不明白为什么

3 个答案: