4

子コンポーネントを含む親コンポーネントがあります。

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

m 子コンポーネントの内部:

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

親の状態に基づいてソースを変更したい。たとえば、親の状態が 1 の場合、ソースは画像 1 になり、状態が 2 の場合、ソースは画像 2 になり、状態が 3 の場合、画像 3 になります。構文がどうなるかわかりません子供の画像ソースを完成させます。次のようなものでしょうか。

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

編集:アバターと呼ばれるマテリアルUIコンポーネントを使用していることを明確にしたかっただけです。(画像をアバターに変更) ドキュメント: http://www.material-ui.com/#/components/avatar

4

2 に答える 2

5

子コンポーネントは親から状態を取得するのではなく、小道具を取得する必要があります。

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

次に、小道具を使用してソースを構築できます（number小道具はjavascript式であり、例のような文字列ではないことに注意してください）：

return(
  <Avatar src={"./picture" + this.props.number + ".jpg"} />
);
于 2016-01-08T07:40:47.570 に答える
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>;
  }
});
于 2016-01-08T07:40:16.127 に答える