如何将数据从 props 中的一个变量传递到 React 应用程序中的另一个变量？

Question

class StarRating extends Component {
  constructor (props) {
    super(props)
}

 log = (selected) => {
  console.log(selected)
}

  render() {
        return <div>
          <Star
          selected = {true}
          doClick={() => this.log(this.selected)}
          />
          <Star />
          <Star/>
          <Star/>
          <Star/>
          </div>
        }
}

我需要通过"selected"，也就是我的"true"才能登录，但是写的是"undefined"，我应该怎么改？

这是星组件。

const Star =  ({selected, doClick=f=>f}) =>
<div className = {(selected) ? "star selected" : "star"} onClick={doClick}></div>

Star.propTypes = {
selected: PropTypes.bool,
doClick: PropTypes.func
}
export default Star

Answer 1

您需要像下面这样构建您的 StarRating 组件

class StarRating extends Component {
    constructor (props) {
      super(props);
      this.state = {
        selected: false
      }
  }

   log = () => {
    this.setState({
        selected: true
    });
  }

    render() {
          return <div>
            <Star
            selected = {this.state.selected}
            doClick={this.log}
            />
            <Star />
            <Star/>
            <Star/>
            <Star/>
            </div>
          }
  }

和

const Star =  ({selected, doClick}) => <div className = {(selected) ? "star selected" : "star"} onClick={doClick}></div>

Star.propTypes = {
  selected: PropTypes.bool,
  doClick: PropTypes.func
}
export default Star;

如何将数据从 props 中的一个变量传递到 React 应用程序中的另一个变量？

How to pass data from one variable in props to another in React app?

closures

dataflow

reactjs