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

Question

我有一个包含子组件的父组件：

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

在 m 子组件内部：

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

我想根据父级的状态更改源。例如，如果父级的状态为 1，则源将为图片 1，或者如果状态为 2，则源为图片2，如果状态为 3，则为图片 3。我不确定语法是什么完成孩子的图片来源。会不会是这样的：

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

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

Answer 1

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

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

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

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

Answer 2

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

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