我如何使用道具以在ReactJS中创建条件，在此条件下我可以更改应用程序的状态

Question

I have two components, the parent "App" component and the Hero component which contains an image and left and right arrow. I want to use the right arrow to move the imageIndex + 1 until it reaches the images.length, and I want to have the left arrow to have a condition that I can't subtract if imageIndex = 0.

So something like: ( This part of the code is not added in my code yet because I keep getting undefined)

   if (this.props.imageIndex > 0) {
     this.setState({
       // decrease the imageIndex by 1
     })
   } 

   if (this.props.imageIndex < this.props.images.length - 1){
     this.setState({
       // increase the imageIndex by 1
     })
   }

will be the condition or something like it.

App.jS (Parent Component)

export default class App extends Component {
constructor() {
    super();

    this.state = {
        language: "english",
        render: 'overview',
        imageIndex: 0,
    }
}

render() {
    // to make sure the state changes
        console.log(this.state.language)

    const {render} = this.state
    return <Fragment>
        <Hero imageIndex = {this.state.imageIndex} />
    </Fragment>;
   }
}

How would I add that in my Hero Component which contains this code:

Hero.js

class Hero extends Component {
constructor(props) {
    super(props);
    this._ToggleNext = this._ToggleNext.bind(this);

}


  _ToggleNext(props) {
    console.log(this.props.listing.images.length)
    console.log(this.props.imageIndex)
}

  _TogglePrev(props) {
    console.log(this.props.listing.images.length)
    console.log(this.props.imageIndex)
}

render() {
    const { listing: { images = [], name, location = {} } = {} } = this.props;
    return <div className="hero">
        <img src={images[0]} alt="listing" />
        <a onClick={this._TogglePrev}) className="hero__arrow hero__arrow--left">◀</a>
        <a onClick={this._ToggleNext} className="hero__arrow hero__arrow--right">▶</a>
        <div className="hero__info">
            <p>{location.city}, {location.state}, {location.country}</p>
            <h1>{name}</h1>
        </div>
    </div>;
}
}

const getHero = gql`
query getHero {
    listing {
        name
        images
        location {
            address,
            city,
            state,
            country
        }
    }
}
`;


export default function HeroHOC(props) {
return <Query
    query={getHero}
>
    {({ data }) => (
        <Hero
            {...props}
            listing={data && data.listing || {}} // eslint-disable-line no-mixed-operators
        />
    )}
</Query>;
}

Answer 1

One solution is to define the data and functionality in the parent component, in this case App , and pass those down as props to the child which will focus on the rendering.

(code not tested but should give you the basic idea)

class App extends Component {
    state = {
        imageIndex: 0,
        listing: {
            images: ['foo.jpg', 'bar.jpg'],
            name: 'foo',
            location: {...}
        }
    }
    _ToggleNext = () => {
        const { imageIndex, listing } = this.state;
        if (imageIndex === listing.images.length - 1) {
            this.setState({imageIndex: 0});
        }
    }
    _TogglePrev = () => {
        const { imageIndex, listing } = this.state;
        if (imageIndex === 0) {
            this.setState({imageIndex: listing.images.length - 1});
        }
    }
    render() {
        return (
            <Fragment>
                <Hero
                    listing={this.state.listing}
                    imageIndex={this.state.imageIndex}
                    toggleNext={this._ToggleNext}
                    togglePrev={this._TogglePrev}
                />
            </Fragment>
        );
    }
}

Hero component:

const Hero = props => {
    const { listing, imageIndex, togglePrev, toggleNext } = props;
    return (
        <div className="hero">
            <img src={listing.images[imageIndex]}/>
            <a onClick={togglePrev})>◀</a>
            <a onClick={toggleNext}>▶</a>
            <div className="hero__info">
                ...
            </div>
        </div>
    );
};