Question

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

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

在m子组件内：

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

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

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

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

Answer 1

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

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

然后你可以使用props构建一个源代码（注意number prop是一个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>;
  }
});

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

2 个答案: