Как передать реквизиты рекурсивному дочернему компоненту и сохранить все реквизиты

Question

У меня возникла интересная проблема. У меня есть родительский компонент, у которого есть массив объектов, которые передаются дочернему компоненту, который является TreeView, то есть он рекурсивный. Я передаю функцию и пару других реквизитов для ребенка, а также массив объектов, которые рекурсивно обрабатываются дочерним элементом. При регистрации реквизита в функции рендеринга ребенка на первом рендере все реквизиты есть, но по мере того, как рекурсивная функция перемещается по каждому объекту в массиве, она «теряет» все остальные реквизиты, которые не обрабатываются рекурсивно.

Когда компонент первым делает объект реквизита является: prop1, prop2, arrayOfObjects

Как повторно обрабатывается как рекурсия происходит, реквизит объекта в ребенке становится: arrayOfObjects.

prop1 и prop2 исчезли.

Конечным результатом является то, что я не могу вызвать функцию в родительском элементе из дочернего элемента, поэтому я не могу обновить состояние в зависимости от того, какой узел в дереве щелкнул. Я не использую redux, потому что это руководство по стилю - отдельно от нашего производственного приложения, которое предназначено только для разработчиков, и просто так, если возможно, я хотел бы обрабатывать все состояние из компонентов.

Есть еще одна проблема. Массив объектов - это структура папок файлов в нашем стиле, и мне нужно иметь возможность щелкнуть имя в списке и обновить представление с содержимым этого файла. Это прекрасно работает, когда файл не имеет дочерних элементов, но когда есть дочерние узлы, если я нажимаю на родителя, на него нажимается дочерний элемент. Я пробовал e.stopPropagation(), e.preventDefault() и т. Д., Но мне не повезло. Заранее спасибо.

Родитель:

import React, {Component} from 'react' 
import StyleGuideStructure from '../../styleguide_structure.json' 
import StyleTree from './style_tree' 

class StyleGuide extends Component { 

constructor(props) { 
    super(props) 

    let tree = StyleGuideStructure 

    this.state = { 
     tree: tree 
    } 

Это функция, которую я хотел бы назвать от ребенка

setVisibleSection(nodeTitle) { 

    this.setState({ 
     section: nodeTitle 
    }) 

    } 

    render() { 

    return(

    <TreeNode 
     className="class-name-here" 
     setVisibleSection={this.setVisibleSection.bind(this)} 
     node={this.state.tree} 
    /> 

    ) 

    } 
} 

export default StyleGuide 

Это, по сути, то, что я в детстве, как скрипка здесь:

https://jsfiddle.net/ssorallen/XX8mw/

Единственная разница в том, что внутри переключателя fu nction, я пытаюсь вызвать setVisibleSection в родительском, но без кубиков.

Вот фотография консоли показывает реквизит, когда компонент сначала делает, а затем после рекурсии:

Answer 1

Я не думаю, что я действительно понимаю ваш 2-й выпуск. Не могли бы вы написать скрипку, показывающую проблему?

Я думаю, что ваша первая проблема заключается в том, что вам нужно передать реквизиты детям. Я попытался записать ваш пример на свою скрипку. Вы можете увидеть, щелкнув узлы, название переключилось на имя узла.

https://jsfiddle.net/hbjjq3zj/

/** 
 
* Using React 15.3.0 
 
* 
 
* - 2016-08-12: Update to React 15.3.0, class syntax 
 
* - 2016-02-16: Update to React 0.14.7, ReactDOM, Babel 
 
* - 2015-04-28: Update to React 0.13.6 
 
*/ 
 

 
class TreeNode extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    \t visible: true, 
 
    }; 
 
    } 
 
    
 
    toggle =() => { 
 
    this.setState({visible: !this.state.visible}); 
 
    this.props.setVisibleSection(this.props.node.title) 
 
    }; 
 
    
 
    render() { 
 
    \t var childNodes; 
 
    var classObj; 
 

 
    if (this.props.node.childNodes != null) { 
 
     childNodes = this.props.node.childNodes.map((node, index) => { 
 
     return <li key={index}><TreeNode {...this.props} node={node} /></li> 
 
     }); 
 

 
     classObj = { 
 
     togglable: true, 
 
     "togglable-down": this.state.visible, 
 
     "togglable-up": !this.state.visible 
 
     }; 
 
    } 
 

 
    var style; 
 
    if (!this.state.visible) { 
 
     style = {display: "none"}; 
 
    } 
 

 
    return (
 
     <div> 
 
     <h5 onClick={this.toggle} className={classNames(classObj)}> 
 
      {this.props.node.title} 
 
     </h5> 
 
     <ul style={style}> 
 
      {childNodes} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class ParentComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    \t visible: true, 
 
    }; 
 
    } 
 
    
 
    toggle =() => { 
 
    this.setState({visible: !this.state.visible}); 
 
    }; 
 
    setVisibleSection(nodeTitle) { 
 
    this.setState({ 
 
     title: nodeTitle 
 
    }) 
 
    } 
 
    render() { 
 
    return (
 
    \t <div> 
 
     \t Title: {this.state.title} 
 
     \t <TreeNode 
 
     \t node={tree} 
 
      setVisibleSection={this.setVisibleSection.bind(this)} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 

 

 
var tree = { 
 
    title: "howdy", 
 
    childNodes: [ 
 
    {title: "bobby"}, 
 
    {title: "suzie", childNodes: [ 
 
     {title: "puppy", childNodes: [ 
 
     {title: "dog house"} 
 
     ]}, 
 
     {title: "cherry tree"} 
 
    ]} 
 
    ] 
 
}; 
 

 
ReactDOM.render(
 
    <ParentComponent />, 
 
    document.getElementById("tree") 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>