テストユーザー：
私は、ネストされたメニューやサブメニューを作っていますし、すべてが今のように行われている..私は、この折り畳み式のメニューが与えられたIDに基づいて、デフォルトで開かれた取得するようにする必要性に今の私..
また、以下のスニペット完全な作業コードを見て取ることができます
const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five - four"}]},{id:"6",name:"Six"}]);
const openMenuId = "3.1.1.1";
const {Component, Fragment} = React;
const {Button, Collapse, Input} = Reactstrap;
class Menu extends Component {
constructor(props) {
super(props);
this.state = {menuItems: []};
}
render() {
return <MenuItemContainer menuItems={this.state.menuItems} />;
}
componentDidMount() {
loadMenu().then(menuItems => this.setState({menuItems}));
}
}
function MenuItemContainer(props) {
if (!props.menuItems.length) return null;
const renderMenuItem = menuItem =>
<li key={menuItem.id}><MenuItem {...menuItem} /></li>;
return <ul>{props.menuItems.map(renderMenuItem)}</ul>;
}
MenuItemContainer.defaultProps = {menuItems: []};
class MenuItem extends Component {
constructor(props) {
super(props);
this.state = {isOpen: false};
this.toggle = this.toggle.bind(this);
}
render() {
let isLastChild = this.props.children ? false : true;
return (
<Fragment>
<Button onClick={this.toggle}>{this.props.name}</Button>
<Fragment>
{isLastChild ? <Input type="checkbox" value={this.props.id} /> : ''}
</Fragment>
<Collapse isOpen={this.state.isOpen}>
<MenuItemContainer menuItems={this.props.children} />
</Collapse>
</Fragment>
);
}
toggle() {
this.setState(({isOpen}) => ({isOpen: !isOpen}));
}
}
ReactDOM.render(<Menu />, document.getElementById("root"));<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>
<div id="root"></div>要件：
私はに保存されたid値持っていますconst openMenuId = "3.1.1.1.1";（あなたは下のこの変数を見ることができる親コンポーネントでのloadMenu配列変数）..
複数のサブメニューがあるにもかかわらず、このIDは、最後のレベルに属し、したがって子どもIDとは、必ずチェックボックスのニーズがチェックするようにして開くGETに親レベルのニーズにアップメニューのチェックボックスを持っているでしょうします。
例えば..、
openMenuIdがあるので"3.1.1.1.1"、したがって、メニューの最後の子レベルであることは明らかthreeであるThree - one - one - one - oneニーズとしてチェックするopenMenuIdと、チェックボックスの値がここで試合を持っている...そして、それぞれのメニューとサブメニューは、最後のレベルまで拡張する必要があります。
これは、そのユーザが戻って、他のメニュー内の他のチェックボックスをチェックすることができ折りたたむことができた後にのみページのデフォルトの動作のためにそう訪れます。..しかし、ページを訪問している間、私はニーズがデフォルトで開かれた取得するために、特定のIDを持つことになりますし、また、チェックボックスにチェックする必要があります。..
親切に助けを私は小道具として受け継がIDを比較することによって、それぞれのメニューを開いた結果を達成し、それぞれのメニューをチェック作ります..
長い時間のために苦労し、そうしてください助け私を..事前に大感謝..
CBR：
どのような偉大な質問！私は本当にこの1のための解決策を考え出す楽しみました。
あなたはメニュー状態とチェックボックスの状態の両方に初期状態を与えることを望んでいたように、私は上の両方の状態を制御することを考える<Menu>レベル（またはそれ以上！）良いアイデアです。これにより、簡単に親から初期状態を定義することを可能にするだけでなく、あなたが将来的にいくつかのより複雑なメニューやチェックボックスの動作が必要な場合、それはまた、あなたに多くの柔軟性を付与します。
メニューの構造が再帰的であるので、私はメニュー状態のための再帰的な構造を持つことがかなりうまく機能していると思います。私は、コードに入る前に、ここで私は願って、短いGIFは、状態のルックスのように何の説明に役立ちます：
デモ
ここでは遊び場の抜粋です：
const loadMenu = () =>
Promise.resolve([
{
id: "1",
name: "One",
children: [
{
id: "1.1",
name: "One - one",
children: [
{ id: "1.1.1", name: "One - one - one" },
{ id: "1.1.2", name: "One - one - two" },
{ id: "1.1.3", name: "One - one - three" }
]
}
]
},
{ id: "2", name: "Two", children: [{ id: "2.1", name: "Two - one" }] },
{
id: "3",
name: "Three",
children: [
{
id: "3.1",
name: "Three - one",
children: [
{
id: "3.1.1",
name: "Three - one - one",
children: [
{
id: "3.1.1.1",
name: "Three - one - one - one",
children: [
{ id: "3.1.1.1.1", name: "Three - one - one - one - one" }
]
}
]
}
]
}
]
},
{ id: "4", name: "Four" },
{
id: "5",
name: "Five",
children: [
{ id: "5.1", name: "Five - one" },
{ id: "5.2", name: "Five - two" },
{ id: "5.3", name: "Five - three" },
{ id: "5.4", name: "Five - four" }
]
},
{ id: "6", name: "Six" }
]);
const { Component, Fragment } = React;
const { Button, Collapse, Input } = Reactstrap;
const replaceNode = (replacer, node, idPath, i) => {
if (i <= idPath.length && !node) {
// Not at target node yet, create nodes in between
node = {};
}
if (i > idPath.length) {
// Reached target node
return replacer(node);
}
// Construct ID that matches this depth - depth meaning
// the amount of dots in between the ID
const id = idPath.slice(0, i).join(".");
return {
...node,
// Recurse
[id]: replaceNode(replacer, node[id], idPath, i + 1)
};
};
const replaceNodeById = (node, id, visitor) => {
// Pass array of the id's parts instead of working on the string
// directly - easy way to handle multi-number ID parts e.g. 3.1.15.32
return replaceNode(visitor, node, id.split("."), 1);
};
const expandedNode = () => ({});
const unexpandedNode = () => undefined;
const toggleNodeById = (node, id) =>
replaceNodeById(node, id, oldNode =>
oldNode ? unexpandedNode() : expandedNode()
);
const expandNodeById = (node, id) =>
replaceNodeById(node, id, oldNode => expandedNode());
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
menuItems: [],
openMenus: {},
checkedMenus: {}
};
this.handleMenuToggle = this.handleMenuToggle.bind(this);
this.handleChecked = this.handleChecked.bind(this);
}
render() {
const { menuItems, openMenus, checkedMenus } = this.state;
return (
<div
style={{
display: "flex",
flexDirection: "row",
columnCount: 3,
justifyContent: "space-between"
}}
>
<div style={{ paddingTop: "10px" }}>
<MenuItemContainer
openMenus={openMenus}
menuItems={menuItems}
onMenuToggle={this.handleMenuToggle}
checkedMenus={checkedMenus}
onChecked={this.handleChecked}
/>
</div>
<div style={{ padding: "10px", marginLeft: "auto" }}>
<p>Menu state</p>
<pre>{JSON.stringify(openMenus, null, 2)}</pre>
</div>
<div style={{ padding: "10px", width: "177px" }}>
<p>Checkbox state</p>
<pre>{JSON.stringify(checkedMenus, null, 2)}</pre>
</div>
</div>
);
}
componentDidMount() {
const { initialOpenMenuId, initialCheckedMenuIds } = this.props;
loadMenu().then(menuItems => {
const initialMenuState = {};
this.setState({
menuItems,
openMenus: expandNodeById(initialMenuState, initialOpenMenuId),
checkedMenus: initialCheckedMenuIds.reduce(
(acc, val) => ({ ...acc, [val]: true }),
{}
)
});
});
}
handleMenuToggle(toggledId) {
this.setState(({ openMenus }) => ({
openMenus: toggleNodeById(openMenus, toggledId)
}));
}
handleChecked(toggledId) {
this.setState(({ checkedMenus }) => ({
checkedMenus: {
...checkedMenus,
[toggledId]: checkedMenus[toggledId] ? unexpandedNode() : expandedNode()
}
}));
}
}
function MenuItemContainer({
openMenus,
onMenuToggle,
checkedMenus,
onChecked,
menuItems = []
}) {
if (!menuItems.length) return null;
const renderMenuItem = menuItem => (
<li key={menuItem.id}>
<MenuItem
openMenus={openMenus}
onMenuToggle={onMenuToggle}
checkedMenus={checkedMenus}
onChecked={onChecked}
{...menuItem}
/>
</li>
);
return <ul>{menuItems.map(renderMenuItem)}</ul>;
}
class MenuItem extends Component {
constructor(props) {
super(props);
this.handleToggle = this.handleToggle.bind(this);
this.handleChecked = this.handleChecked.bind(this);
}
render() {
const {
children,
name,
id,
openMenus,
onMenuToggle,
checkedMenus,
onChecked
} = this.props;
const isLastChild = !children;
return (
<Fragment>
<Button onClick={isLastChild ? this.handleChecked : this.handleToggle}>
{name}
</Button>
{isLastChild && (
<Input
addon
type="checkbox"
onChange={this.handleChecked}
checked={!!checkedMenus[id]}
value={id}
/>
)}
<Collapse isOpen={openMenus ? !!openMenus[id] : false}>
<MenuItemContainer
menuItems={children}
// Pass down child menus' state
openMenus={openMenus && openMenus[id]}
onMenuToggle={onMenuToggle}
checkedMenus={checkedMenus}
onChecked={onChecked}
/>
</Collapse>
</Fragment>
);
}
handleToggle() {
this.props.onMenuToggle(this.props.id);
}
handleChecked() {
this.props.onChecked(this.props.id);
}
}
ReactDOM.render(
<Menu initialOpenMenuId="3.1.1.1" initialCheckedMenuIds={["3.1.1.1.1"]} />,
document.getElementById("root")
);<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>
<div id="root"></div>回答
以下のコードは、ウォークスルー。
const loadMenu = () =>
Promise.resolve([
{
id: "1",
name: "One",
children: [
{
id: "1.1",
name: "One - one",
children: [
{ id: "1.1.1", name: "One - one - one" },
{ id: "1.1.2", name: "One - one - two" },
{ id: "1.1.3", name: "One - one - three" }
]
}
]
},
{ id: "2", name: "Two", children: [{ id: "2.1", name: "Two - one" }] },
{
id: "3",
name: "Three",
children: [
{
id: "3.1",
name: "Three - one",
children: [
{
id: "3.1.1",
name: "Three - one - one",
children: [
{
id: "3.1.1.1",
name: "Three - one - one - one",
children: [
{ id: "3.1.1.1.1", name: "Three - one - one - one - one" }
]
}
]
}
]
}
]
},
{ id: "4", name: "Four" },
{
id: "5",
name: "Five",
children: [
{ id: "5.1", name: "Five - one" },
{ id: "5.2", name: "Five - two" },
{ id: "5.3", name: "Five - three" },
{ id: "5.4", name: "Five - four" }
]
},
{ id: "6", name: "Six" }
]);
const { Component, Fragment } = React;
const { Button, Collapse, Input } = Reactstrap;
const replaceNode = (replacer, node, idPath, i) => {
if (i <= idPath.length && !node) {
// Not at target node yet, create nodes in between
node = {};
}
if (i > idPath.length) {
// Reached target node
return replacer(node);
}
// Construct ID that matches this depth - depth meaning
// the amount of dots in between the ID
const id = idPath.slice(0, i).join(".");
return {
...node,
// Recurse
[id]: replaceNode(replacer, node[id], idPath, i + 1)
};
};
const replaceNodeById = (node, id, visitor) => {
// Pass array of the id's parts instead of working on the string
// directly - easy way to handle multi-number ID parts e.g. 3.1.15.32
return replaceNode(visitor, node, id.split("."), 1);
};
const expandedNode = () => ({});
const unexpandedNode = () => undefined;
const toggleNodeById = (node, id) =>
replaceNodeById(node, id, oldNode =>
oldNode ? unexpandedNode() : expandedNode()
);
const expandNodeById = (node, id) =>
replaceNodeById(node, id, oldNode => expandedNode());
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
menuItems: [],
openMenus: {},
checkedMenus: {}
};
this.handleMenuToggle = this.handleMenuToggle.bind(this);
this.handleChecked = this.handleChecked.bind(this);
}
render() {
const { menuItems, openMenus, checkedMenus } = this.state;
return (
<MenuItemContainer
openMenus={openMenus}
menuItems={menuItems}
onMenuToggle={this.handleMenuToggle}
checkedMenus={checkedMenus}
onChecked={this.handleChecked}
/>
);
}
componentDidMount() {
const { initialOpenMenuId, initialCheckedMenuIds } = this.props;
loadMenu().then(menuItems => {
const initialMenuState = {};
this.setState({
menuItems,
openMenus: expandNodeById(initialMenuState, initialOpenMenuId),
checkedMenus: initialCheckedMenuIds.reduce(
(acc, val) => ({ ...acc, [val]: true }),
{}
)
});
});
}
handleMenuToggle(toggledId) {
this.setState(({ openMenus }) => ({
openMenus: toggleNodeById(openMenus, toggledId)
}));
}
handleChecked(toggledId) {
this.setState(({ checkedMenus }) => ({
checkedMenus: {
...checkedMenus,
[toggledId]: checkedMenus[toggledId] ? unexpandedNode() : expandedNode()
}
}));
}
}
function MenuItemContainer({
openMenus,
onMenuToggle,
checkedMenus,
onChecked,
menuItems = []
}) {
if (!menuItems.length) return null;
const renderMenuItem = menuItem => (
<li key={menuItem.id}>
<MenuItem
openMenus={openMenus}
onMenuToggle={onMenuToggle}
checkedMenus={checkedMenus}
onChecked={onChecked}
{...menuItem}
/>
</li>
);
return <ul>{menuItems.map(renderMenuItem)}</ul>;
}
class MenuItem extends Component {
constructor(props) {
super(props);
this.handleToggle = this.handleToggle.bind(this);
this.handleChecked = this.handleChecked.bind(this);
}
render() {
const {
children,
name,
id,
openMenus,
onMenuToggle,
checkedMenus,
onChecked
} = this.props;
const isLastChild = !children;
return (
<Fragment>
<Button onClick={isLastChild ? this.handleChecked : this.handleToggle}>
{name}
</Button>
{isLastChild && (
<Input
addon
type="checkbox"
onChange={this.handleChecked}
checked={!!checkedMenus[id]}
value={id}
/>
)}
<Collapse isOpen={openMenus ? !!openMenus[id] : false}>
<MenuItemContainer
menuItems={children}
// Pass down child menus' state
openMenus={openMenus && openMenus[id]}
onMenuToggle={onMenuToggle}
checkedMenus={checkedMenus}
onChecked={onChecked}
/>
</Collapse>
</Fragment>
);
}
handleToggle() {
this.props.onMenuToggle(this.props.id);
}
handleChecked() {
this.props.onChecked(this.props.id);
}
}
ReactDOM.render(
<Menu initialOpenMenuId="3.1.1.1" initialCheckedMenuIds={["3.1.1.1.1"]} />,
document.getElementById("root")
);<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>
<div id="root"></div>チュートリアル
私が開始する前に、私は現代のJavaScriptは似機能を使用するためのコードの一部を変更する自由を取ったと言わなければならないオブジェクトの非構造、配列の非構造、休息とデフォルト値。
状態を作成します
そう。メニュー項目のIDは、ドットで区切られた数字なので状態を構築する際に、我々はこれを利用することができます。状態は本質的にツリー状の親の子である各サブメニュー、およびリーフノード（「最後のメニュー」または「最も深いメニュー」）のいずれかの値を有する構造、{}それが拡大し、あるいはならundefinedない場合は。ここでは、メニューの初期状態が構築される方法は次のとおりです。
<Menu initialOpenMenuId="3.1.1.1" initialCheckedMenuIds={["3.1.1.1.1"]} />
// ...
loadMenu().then(menuItems => {
const initialMenuState = {};
this.setState({
menuItems,
openMenus: expandNodeById(initialMenuState, initialOpenMenuId),
checkedMenus: initialCheckedMenuIds.reduce(
(acc, val) => ({ ...acc, [val]: true }),
{}
)
});
});
// ...
const expandedNode = () => ({});
const unexpandedNode = () => undefined;
const toggleNodeById = (node, id) =>
replaceNodeById(node, id, oldNode =>
oldNode ? unexpandedNode() : expandedNode()
);
const expandNodeById = (node, id) =>
replaceNodeById(node, id, oldNode => expandedNode());
const replaceNodeById = (node, id, visitor) => {
// Pass array of the id's parts instead of working on the string
// directly - easy way to handle multi-number ID parts e.g. 3.1.15.32
return replaceNode(visitor, node, id.split("."), 1);
};
const replaceNode = (replacer, node, idPath, i) => {
if (i <= idPath.length && !node) {
// Not at target node yet, create nodes in between
node = {};
}
if (i > idPath.length) {
// Reached target node
return replacer(node);
}
// Construct ID that matches this depth - depth meaning
// the amount of dots in between the ID
const id = idPath.slice(0, i).join(".");
return {
...node,
// Recurse
[id]: replaceNode(replacer, node[id], idPath, i + 1)
};
};
のは、ビットで、この離れビットを見てみましょう。
const expandedNode = () => ({});
const unexpandedNode = () => undefined;
これらは我々が簡単に我々が展開され、展開されていないノードを表すために使用した値を変更することができますので、我々が定義するだけで便利な機能です。それはまた、単にリテラル使用する場合と比較して、コードを少し読みやすくなり{}またはundefinedコードで。拡大し、展開されていない値は全く同じようにすることができtrueそしてfalseどのような重要なの拡大ノードがあるということです、truthyと拡張されていないノードがfalsyです。もっとそのことについて後で。
const toggleNodeById = (node, id) =>
replaceNodeById(node, id, oldNode =>
oldNode ? unexpandedNode() : expandedNode()
);
const expandNodeById = (node, id) =>
replaceNodeById(node, id, oldNode => expandedNode());
これらの機能は、私たちは切り替えやメニュー状態で特定のメニューを展開してみましょう。最初のパラメータがメニュー状態自体で、第二は、メニュー（例えば、文字列IDである"3.1.1.1.1"）、および第三の置換ない機能です。あなたがに渡す関数のように、このを考えます.map()。あなたには、いくつかの特定のメニューが展開されていないようにしたい場合たとえば、あなただけのリターンという機能に渡すことができます-あなたは簡単に後からより多くの機能を実装することができるように代用の機能は、実際の再帰的な木の反復から分離されていますunexpandedNode()。
const replaceNodeById = (node, id, visitor) => {
// Pass array of the id's parts instead of working on the string
// directly - easy way to handle multi-number ID parts e.g. 3.1.15.32
return replaceNode(visitor, node, id.split("."), 1);
};
この関数は、クリーンなインターフェイスを提供するために、前の2つのものが使用しています。IDは、ドット（で、ここで分割されている.私たちにID部分の配列を与えます）。その方法は、私たちが行う必要はありませんので、次の関数は、この配列の代わりに、直接ID文字列で動作.indexOf('.')ペテンを。
const replaceNode = (replacer, node, idPath, i) => {
if (i <= idPath.length && !node) {
// Not at target node yet, create nodes in between
node = {};
}
if (i > idPath.length) {
// Reached target node
return replacer(node);
}
// Construct ID that matches this depth - depth meaning
// the amount of dots in between the ID
const id = idPath.slice(0, i).join(".");
return {
...node,
// Recurse
[id]: replaceNode(replacer, node[id], idPath, i + 1)
};
};
replaceNode機能は、問題の肉です。これは、提供さ代用機能で古いターゲット・ノードを置き換える、古いメニューツリーから新しいツリーを作成する再帰関数です。ツリーは、間にからの部品が欠落している場合は、例えば木があるとき、{}私たちはノードを置換したい3.1.1.1、それが間に親ノードを作成します。同様の種類のmkdir -pコマンドに精通している場合。
だから、メニュー状態です。チェックボックスの状態は、（ checkedMenus）キーIDおよび値であると、基本的にはインデックスであるtrue項目がチェックされている場合。彼らは未確認であることを必要とするか、または再帰的に確認されていないので、この状態は、再帰的ではありません。あなたはこのメニュー項目の下に何かがチェックされていることを示すインジケータを表示することを決定した場合、簡単な解決策は、メニュー状態のような再帰的であることを、チェックボックスの状態を変更することです。
ツリーをレンダリング
<Menu>状態ダウンコンポーネントパスの<MenuItemContainer>レンダリング、<MenuItem>秒。
function MenuItemContainer({
openMenus,
onMenuToggle,
checkedMenus,
onChecked,
menuItems = []
}) {
if (!menuItems.length) return null;
const renderMenuItem = menuItem => (
<li key={menuItem.id}>
<MenuItem
openMenus={openMenus}
onMenuToggle={onMenuToggle}
checkedMenus={checkedMenus}
onChecked={onChecked}
{...menuItem}
/>
</li>
);
return <ul>{menuItems.map(renderMenuItem)}</ul>;
}
<MenuItemContainer>コンポーネントは、元のコンポーネントからの非常に異なるものではありません。<MenuItem>コンポーネントはいますが、少し違って見えるん。
class MenuItem extends Component {
constructor(props) {
super(props);
this.handleToggle = this.handleToggle.bind(this);
this.handleChecked = this.handleChecked.bind(this);
}
render() {
const {
children,
name,
id,
openMenus,
onMenuToggle,
checkedMenus,
onChecked
} = this.props;
const isLastChild = !children;
return (
<Fragment>
<Button onClick={isLastChild ? this.handleChecked : this.handleToggle}>
{name}
</Button>
{isLastChild && (
<Input
addon
type="checkbox"
onChange={this.handleChecked}
checked={!!checkedMenus[id]}
value={id}
/>
)}
<Collapse isOpen={openMenus ? !!openMenus[id] : false}>
<MenuItemContainer
menuItems={children}
// Pass down child menus' state
openMenus={openMenus && openMenus[id]}
onMenuToggle={onMenuToggle}
checkedMenus={checkedMenus}
onChecked={onChecked}
/>
</Collapse>
</Fragment>
);
}
handleToggle() {
this.props.onMenuToggle(this.props.id);
}
handleChecked() {
this.props.onChecked(this.props.id);
}
}
ここで重要な部分はこれです：openMenus={openMenus && openMenus[id]}。代わりに、メニュー全体の状態をダウン渡す、我々は現在の項目の子が含まれている状態の木を下に渡します。自身のIDが対象から発見された場合だけ（チェック-これは、それが開いているか、崩壊しなければならない場合、コンポーネントは非常に簡単にチェックすることができますopenMenus ? !!openMenus[id] : false）！
それは、メニューで最も深いアイテムだ場合、私はまた、チェックボックスの代わりに、メニュー状態を切り替えるためにトグルボタンを変更 - これはないあなたが探しているものであれば、それは変更の背面にはかなり速いです。
私はまた、利用することが!!強要にここ{}とundefinedにメニュー状態からtrueかfalse。私はそれは彼らだけだtruthyまたはfalsyかどうかを重要と述べたのはこのためです。reactstrapコンポーネントが明示したいように見えたtrueかfalse、それはありますなぜこれほどのことではなく、truthy / falsyの。
そして最後に：
ReactDOM.render(
<Menu initialOpenMenuId="3.1.1.1" initialCheckedMenuIds={["3.1.1.1.1"]} />,
document.getElementById("root")
);
ここでは、初期状態を渡します<Menu>。initialOpenMenuIdまた、配列にすることができ（またはinitialCheckedMenuIds単一の文字列かもしれない）が、これは質問のスペックに合わせて。
改善の余地
解決策は今の状態のすべての方法のようなダウン、たくさんのダウン渡すonMenuToggleとonChecked、コールバック、およびcheckedMenus再帰的ではありません状態。これらはのリアクトの使用作ることができコンテキスト。