web-dev-qa-db-ja.com

React.jsで1つのクラスから別のクラスに小道具を渡す方法

私はReactが初めてです。ユーザーがドロップダウンメニューを使用して、現在使用する色を選択できる、非常に単純な9グリッドボックスを作成して練習しています。唯一のものは、変数を含むクラス（ColorPicker）からグリッドを含むクラス（Box）に変数を渡す方法がわかりません。誰も私にこれを行う方法に関するいくつかの指針を与えることができますか？

私はまだ小道具を他のクラスに渡すことに慣れています。

CodePenへのリンクは次のとおりです。 http://codepen.io/anfperez/pen/RorKge

これが私のコードです

//this displays the color selections for the boxes: red, green, and blue
var ColorPicker = React.createClass({

handleChange: function(e) {
    var newColor = e.target.value;
    this.props.onChange(color);

},

render: function() {

return (
    <div>
        <select id="pick-colors" onChange={this.handleChange}>
            <option value="red">
                Red 
            </option>

            <option value="green">
                Green 
            </option>

            <option value="blue">
                Blue 
            </option>

        </select>

    </div>
    )
}
});

//contains the boxes that will eventually change color
var Box = React.createClass({
getInitialState: function() {
    return {
      //boxes are initially white
        color: 'white'
    };
},

    changeColor: function(newColor) {
        var newColor = this.state.color;
        this.setState({
            color: newColor
        });

    },

render: function() {
    return (
    <div >
    <div className='box' style={{background:this.state.color}} onClick={this.changeColor}> 
    </div>
    </div>
    );
}
});
javascriptclassreactjscomponents
9
Leia_Organa

React親から子に渡される小道具。たとえば、子クラスをレンダリングする親クラスがある場合、親クラスは小道具を子クラスに渡すことができます。例。

class Parent extends React.Component {
    render() {
        return (
            <Child example="foo" />
        )
    }
}

class Child extends React.component {
    render() {
        return (
            <h1>{this.props.example}</h1>
        )
    }
}

親クラスは子クラスをレンダリングします。親クラスは、exampleという子に小道具を渡します。子では、this.props.exampleを呼び出すことにより、子の値にアクセスできます。

23
Chaim Friedman

DOMに10回レンダリングする代わりに、他の各コンポーネントをラップする1つのメインコンポーネントをレンダリングする必要があります。他のコンポーネント内でコンポーネントを再利用し、小道具を渡すことができます。

2
Rico Rojas

このようなことができます

var ColorPicker = React.createClass({
 getInitialState: function() {
  return {color: 'white'}
 },
 handleChange: function(e) {
  var newColor = e.target.value;
  this.setState({color: newColor})
 },

 render: function() {

  return (
   <div>
     <select id="pick-colors" onChange={this.handleChange}>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
     </select>
    <Box color={this.state.color} />
    <Box color={this.state.color} />
    <Box color={this.state.color} />
  </div>
 )
}
});

//contains the boxes that will eventually change color
var Box = React.createClass({
 render: function() {
  return (
   <div >
    <div className='box' style={{background:this.props.color}}> 
    </div>
   </div>
  );
 }
});

ReactDOM.render(<ColorPicker />, document.getElementById('pick_color'));

ボックスを複数回レンダリングするか、上記の@gesuwallの提案を使用する代わりに。彼のやり方はもっと効果的な方法だと思います。

2
Komolafe Tolulope

これら2つを含み、選択した色を状態として管理する別のコンポーネントを使用する必要があります。 ColorPickerが新しい値を取得すると、コンテナの状態が更新され、Boxがこれを取得すると、コンテナの状態から色の値が取得されます。

ColorPickerは、色の値が変更されたときに実行するコールバックをプロパティから取得する必要があります。

var ColorPicker = React.createClass({

render: function() {

return (
    <div>
        <select id="pick-colors" onChange={this.props.onChange}>
            <option value="red">
                Red 
            </option>

            <option value="green">
                Green 
            </option>

            <option value="blue">
                Blue 
            </option>

        </select>

    </div>
    )
}
});

var App = React.createClass({
    getInitialState: function() {
        return {
             selectedColor: '#FFFFFF'
        }    
    },
    onColorPicked: function(e) {
        this.setState({selectedColor: e.target.value })
    },
    render: function() {
        return (
            <div>
              <ColorPicker onChange={this.props.onColorPicked} />
              <Box color={this.state.selectedColor} />
            </div>
        )
    }

}

唯一のステートフルコンポーネントはAppでなければなりません。その状態を小道具を介して他のコンポーネントに渡します。

2
gesuwall

これは、ColorPickerクラスとBoxクラスの両方をラップする親コンポーネントに状態を持ち上げる必要がある場合です。新しい親コンポーネントは、現在の色の状態を管理し、変更を処理します。 リフティング状態に関するreactJSドキュメント はあなたに役立ちます。

1
Alex Young
  1. React.renderは、アプリケーションごとに1回呼び出す必要があります。これは、各呼び出しは、新しいアプリケーション用に作成された新しい仮想DOMを意味するためです。
  2. 仮想DOMの概念を理解し、レンダリングメソッドでトップレベルアプリケーションコンテナコンポーネントにマークアップを実装する必要があります。
  3. 純粋な場合、この例のように、すべてのデータをAppコンポーネント状態に接続する必要があります。つまり、色の変更時にColorPickerコンポーネントがApp状態に保存し、変更された値によってBoxコンポーネントプロパティを更新します。 、reduxまたはfluxの概念を使用してデータストレージを整理する必要があります。これは、同じページ上の複数のアプリケーション間でデータを交換する正しい方法でもあります

したがって、サンプルを実装する here 正しいコード

1
js-coder

プロパティを親から子に渡す場合、componentDidUpdate（）メソッドを使用してプロパティを収集し、使用する必要があります。それ以外の場合、プロパティはまだ初期化されていない可能性があり、子コンポーネントでnull値になります。上記のコードを変更して、componentDidUpdate（）メソッドを含めました。

class Parent extends React.Component {
    render() {
        return (
            <Child bandName="foo fighters" />
        )
    }
}

class Child extends React.Component {

    //For props, you use componentDidUpdate
    componentDidUpdate(prevProps){

      //You must have an if check, or loop forever
      if(this.props.bandName !== this.prevProps.bandName){}
         //do something like make an API call
         //perhaps set this on state for display
      }
    }

    render() {
        return (
            <h1>{this.props.bandName}</h1>
        )
    }
}
0
user3018736