web-dev-qa-db-ja.com

Reactjs-あるコンポーネントから別のコンポーネントに状態値を渡す

SideNavとDashboardの2つのコンポーネントがあります（2つは異なるjsファイルにあります）。 SideNavにはフィルターとしてselectboxがあります。ダッシュボードコンポーネントからサイドバーコンポーネントに配列を渡す必要があります。この配列は、選択ボックス（sidenavコンポーネント内）の値として指定する必要があります。

P.S。 2つの異なるJSファイルで2つの異なるコンポーネントクラスが定義されている場合はどうなりますか。例えばHomeComponent/Home.js->親コンポーネントDashboard/Dashboard.js->子コンポーネント「Home.js」ファイルでAPI呼び出しを行い、データを取得しています。これらのデータを「Dashboard.js」ファイル（コンポーネント）に渡したいと思います。調査したすべての例では、同じJSファイル内の2つのコンポーネントを示しています。

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state  = {viz:{},filterData:{}};
  }
  var data1= ['1','2','3'];
  this.setState({data1: data1}, function () {
     console.log(this.state.data1);
  });

 }

//Sidebar

class Sidebar extends Component {

   constructor(props) {
     super(props);
     this.state  = {
       data: ['opt1','opt2']
     };
   }

  handleClick(e) {
    e.preventDefault();
    e.target.parentElement.classList.toggle('open');
    this.setState({data: this.state.data1}, function () {
      console.log(this.state.data);
    });
  }

  render() {

    const props = this.props;
    const handleClick = this.handleClick;

    return (
      <div className="sidebar">
        <nav className="sidebar-nav">
          <Nav>
            <li className="nav-item nav-dropdown">
              <p className="nav-link nav-dropdown-toggle" onClick={handleClick.bind(this)}>Global</p>
              <ul className="nav-dropdown-items">
              <li> Organization <br/>
               <select className="form-control">
                <option value="">Select </option>
                {this.state.data.map(function (option,key) {
                   return <option key={key}>{option}</option>;
                 })}
               </select>
reactjscomponents
8
sudhashree

ダッシュボードからサイドバーに状態を渡す必要がある場合、ダッシュボードのレンダリング機能からサイドバーをレンダリングする必要があります。ここで、ダッシュボードの状態をサイドバーに渡すことができます。

コードスニペット

class Dashboard extends Component {
...
...
  render(){
    return(
    <Sidebar data={this.state.data1}/>
    );
  }
}

サイドバーに渡された小道具（data1）で行われた変更をダッシュ​​ボードで受け取るには、状態を上げる必要があります。つまり、ダッシュボードからサイドバーに関数参照を渡す必要があります。サイドバーでは、data1をダッシュ​​ボードに戻すときにいつでも呼び出す必要があります。コードスニペット。

class Dashboard extends Component {
  constructor(props){
    ...
    //following is not required if u are using => functions in ES6.
    this.onData1Changed = this.onData1Changed.bind(this);
  }
  ...
  ...
  onData1Changed(newData1){
    this.setState({data1 : newData1}, ()=>{
      console.log('Data 1 changed by Sidebar');
    })
  }

  render(){
    return(
    <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/>
    );
  }
}

class Sidebar extends Component {
  ...
  //whenever data1 change needs to be sent to Dashboard
  //note: data1 is a variable available with the changed data
  this.props.onData1changed(data1);
}

参照ドキュメント： https://facebook.github.io/react/docs/lifting-state-up.html

9
Sri

親コンポーネントと子コンポーネントにも同じ問題があり、解決策は単純に関数（親コンポーネントの状態を変更する）を子コンポーネントの小道具として送信することでした。このようにして、両方が特定の変数の状態を共有しています。この簡単なアプローチがあなたを助けることを願っています！

1
simpleCoder

親から子コンポーネントにのみ小道具を渡すことができます。コンポーネント階層を再構築してこの依存関係を持たせるか、Redux（react-redux）などの状態/イベント管理システムを使用してください。

1
JulienD

ステータス値をページURLに合わせるのは、値を渡すだけでなく、URLでページステータスを制御できるようにするための別の良い方法だと思います。

さまざまなコンポーネントが検索条件を制御する高度な検索ページを構築していることを想像してください。したがって、検索機能に加えて、ユーザーは使用されたURLで検索設定を保持できる必要があります。

コンポーネントxのリンクをクリックすると、クエリ文字列criteria1 = xが現在のページのURLに追加され、他のコンポーネントについても同様であると仮定します。また、状態値を読み取るためにURLに依存するように検索機能を設定したとします。これにより、制限なしで特定のコンポーネントから任意の数のコンポーネントに値を渡すことができます。

0
Yazid Erman