javascript - Syntax to change image source based on states and props in react - Stack Overflow

admin管理员组

文章数量:1348081

I have a parent ponent that contains a child ponent:

return(
  <ChildComponent state={this.getState} />
);

Inside m child ponent:

return(
  <Avatar src="./picture" />
);

I want to change the source based on the state of the parent. For example if the state of the parent was 1 i the source will be picture1 or if the state was 2 the source would be picture2 and if the state was 3 it would be picture 3. I'm not sure what the syntax would be to plete the child's image source. Would it be something like this:

<Avatar src="'./picture' + this.props.state + '.jpg'"/>

EDIT: just wanted to make it clear I am using a material UI ponent called avatar. (changed img to avatar) Documentation:

I have a parent ponent that contains a child ponent:

return(
  <ChildComponent state={this.getState} />
);

Inside m child ponent:

return(
  <Avatar src="./picture" />
);

I want to change the source based on the state of the parent. For example if the state of the parent was 1 i the source will be picture1 or if the state was 2 the source would be picture2 and if the state was 3 it would be picture 3. I'm not sure what the syntax would be to plete the child's image source. Would it be something like this:

<Avatar src="'./picture' + this.props.state + '.jpg'"/>

EDIT: just wanted to make it clear I am using a material UI ponent called avatar. (changed img to avatar) Documentation: http://www.material-ui./#/ponents/avatar

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jan 8, 2016 at 7:41 ogk asked Jan 8, 2016 at 7:38 ogkogk 62244 gold badges1313 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The child ponent should not get the state from the parent, but the props:

return(
  <ChildComponent number={this.state.number} />
);

Then you can use the props to construct a source (notice that the number prop is a javascript expression and not a string like in your example):

return(
  <Avatar src={"./picture" + this.props.number + ".jpg"} />
);

In this case instead of "" use {} like this

var ChildComponent = React.createClass({
  render: function() {
    return <Avatar src={'./picture' + this.props.src + '.jpg'}/>
  }
});

var ParentComponent = React.createClass({
  getInitialState: function () {
    return { counter: 0 }
  },

  handleNext: function () {
    this.setState({
        counter: this.state.counter + 1
    });
  },

  handlePrev: function () {
    this.setState({
        counter: this.state.counter - 1
    });
  },

  render: function() {
    return <div> 
      <ChildComponent src={this.state.counter} />
      <div>
        <button onClick={this.handleNext}>Next</button>
        <button onClick={this.handlePrev}>Prev</button>
      </div>
    </div>;
  }
});

本文标签： javascriptSyntax to change image source based on states and props in reactStack Overflow