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>
ダッシュボードからサイドバーに状態を渡す必要がある場合、ダッシュボードのレンダリング機能からサイドバーをレンダリングする必要があります。ここで、ダッシュボードの状態をサイドバーに渡すことができます。
コードスニペット
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
親コンポーネントと子コンポーネントにも同じ問題があり、解決策は単純に関数(親コンポーネントの状態を変更する)を子コンポーネントの小道具として送信することでした。このようにして、両方が特定の変数の状態を共有しています。この簡単なアプローチがあなたを助けることを願っています!
親から子コンポーネントにのみ小道具を渡すことができます。コンポーネント階層を再構築してこの依存関係を持たせるか、Redux(react-redux)などの状態/イベント管理システムを使用してください。
ステータス値をページURLに合わせるのは、値を渡すだけでなく、URLでページステータスを制御できるようにするための別の良い方法だと思います。
さまざまなコンポーネントが検索条件を制御する高度な検索ページを構築していることを想像してください。したがって、検索機能に加えて、ユーザーは使用されたURLで検索設定を保持できる必要があります。
コンポーネントxのリンクをクリックすると、クエリ文字列criteria1 = xが現在のページのURLに追加され、他のコンポーネントについても同様であると仮定します。また、状態値を読み取るためにURLに依存するように検索機能を設定したとします。これにより、制限なしで特定のコンポーネントから任意の数のコンポーネントに値を渡すことができます。