根据反应中的状态和道具更改图像源的语法

Question

我有一个 parent 组件，其中包含一个 child 组件：

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

内部 m child 分量：

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

我想根据 parent 的状态更改源。例如，如果 parent 的状态为 1，则源将为 picture1，或者如果状态为 2，则源将为 picture2，如果状态为 3，则为 picture 3。我不确定是什么语法将是完成 child 的图像源。会不会是这样的:

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

编辑：只是想说明一下我正在使用一个名为 avatar 的 material UI 组件。（将 img 更改为头像）文档：http://www.material-ui.com/#/components/avatar

Answer 1

在这种情况下而不是 "" 使用 {} 像这样

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

Answer 2

子组件不应该从父组件获取状态，而是 props:

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

然后你可以使用道具来构造一个源（注意 number 道具是一个 javascript 表达式而不是像你的例子中的字符串）：

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

根据反应中的状态和道具更改图像源的语法

Syntax to change image source based on states and props in react

javascript

reactjs

material-ui