Реакция: вложенные компоненты многократной компоновки в компоненте более высокого порядка

Question

Я пытался накинуть голову вокруг этой проблемы на некоторое время. Я взломал решение, которое работает, пока я не получу какие-либо вложенные div, тогда все развалится. В основном, я пытаюсь создать составные компоненты, которые живут в компоненте более высокого порядка, и все имеют одинаковое текущее состояние. Затем мне нужно экспортировать это, чтобы любой файл мог использовать эти компоненты. Так вот что JSX может выглядеть следующим образом:

<Panel countersStartAt=5> 
    <Counter incrementsBy=1 /> 
    <div> 
    <Counter incrementsBy=2 /> 
    </div> 
    <TotalCounter className="someclass" /> 
</Panel> 

Так как я хочу что-то вроде этого, чтобы работать в том, что у меня есть этот компонент Panel обертки, которая устанавливает некоторое начальное состояние, скажем, this.state.start = 5. В Панель, компонент Counter будет иметь обработчик onClick, который увеличивает значение state.start с помощью incrementsBy. И TotalCounter будет компонентом, который отображает state.start. Конечно, это надуманный пример, поэтому было бы полезно не поднимать, как я мог бы улучшить этот конкретный компонент. Я хочу применить это к более реалистичной ситуации.

Во-вторых, как экспортировать эти компоненты таким образом, чтобы я мог создать точный код выше в отдельном файле в компоненте без гражданства. Надеюсь, это имеет смысл.

Это фрагмент того, что я делаю для достижения этого.

renderChildren = (children) => { 
    return React.Children.map(children, (child) => { 
     if (React.isValidElement(child)) { 
     return React.createElement(
      (child.type.name ? this[child.type.name] : child.type), 
      child.props 
     ); 
     } 
     return child; 
    }); 
    }; 

    render =() => { 
    return (
     {this.renderChildren(this.props.children)} 
    ) 
    }; 

Тогда вне класса Panel Я экспорт примерно так:

export const Counter =() => null;

Просто так выставляет счетчик. По умолчанию рендеринг нулевого значения не происходит, потому что я заменяю счетчик с помощью метода this.Counter() внутри Panel.

Вопросы, заданные в комментариях и других вещей, чтобы рассмотреть

• Я не использую Flux или Redux
• Предположим, что код панели сниппет используется несколько методов отображения через несколько проектов, которые не реализуют Flux patterns или Redux
• Следует учесть, что эти фрагменты кода не могут быть переписаны
• Как можно экспортировать Panel, Counter и TotalCounter? Можно ли сделать это для Counter и TotalCounter, поскольку они являются методами в классе Panel? Мои исследования привели к отсутствию и созданию «фиктивных» компонентов для экспорта, чтобы текущий файл мог использовать их без ошибок.

Answer 1

Чтобы поместить в ответ здесь для того, что мы говорили в комнате чата

лучший способ справиться, что вы хотите обойтись без системы управления данными, как Redux или флюс для передачи данных, как реквизит через, вот так.

class Panel extends Component { 

    constructor(){ 
     super() 
     this.state = {count: 5} 
    } 
    incrementCount = (incrementer) => { 
     this.setState({count: this.state.count + incrementer}); 
    } 
    render(){ 
     return (
     <div> 
      <Counter incrementCount={this.incrementCount} count={this.state.count} incrementsBy=2 /> 
     </div> 
    ); 
    } 

} 

затем в вашем счетчике ..

<someElement onClick={ (e) => {this.props.incrementCount(this.props.incrementsBy)} }>{this.props.count}</someElement>