Никита Гущин

Создаете реакт-элемент, который будет контейнером. После didMount работаете с DOM внутри этого компонента

class MyD3Component extends Component {
  componenDidMount() {
    ReactDOM.findDOMNode(this.refs.container) // для d3
  }
  
  render() {
    return <div ref="container" />
  }
}

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

Лучше все это делать через редьюсеры. Флаг открытия модального окна, id айтема - все там хранить. Только в 4м пункте в модалку можно передать dropId из state, а на закрытие окна повесить общий обработчик - dropItem(id).

Не не не, тут не много не такая логика. children - это компоненты, не установленные в ДОМ ноды. Можно сделать что-то вроде такого https://jsbin.com/casomojovo/edit?js,console. И уже через refs вы можете вытащить DOMNode

class Container extends React.Component {
   constructor(props){
     super(props);
   }
   
   componentDidMount(){
     console.log('componentDidMount', Object.keys(this.refs));
     // outputs: [ 'ch0', 'ch1' ]
   }
   
   render(){
     
     return (
       <div>{React.Children.map(this.props.children, (ch, i) => React.cloneElement(ch, { ref: 'ch' + i }))}</div>
     );
   }
}

ReactDOM.render(
  <Container>
    <div>hello</div>
    <div>world</div>
  </Container>, 
  document.querySelector('.main-container')
);

Так примерно и делают.
https://www.npmjs.com/package/react-click-outside

Есть API для работы с children: https://facebook.github.io/react/docs/top-level-ap... . Так как children - это просто props, пробегайте рекурсивно по всему дереву и собирайте элементы:

function getChildren(children) {
  let elements = []
  if (!children) {
    return elements
  }

  React.Children.forEach(children, child => {
    elements = [ ...elements, child, ...getChildren(child.props.children) ]
  })

  return elements
}

Вам нужно слушать componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.id })
}

Плюс почитайте как не нужно использовать state: https://facebook.github.io/react/tips/props-in-get...

Если вы их в коннекторе забиндите - а потом передадите, то все окей. Но используйте контекст когда нужно, а не везде.

react-router поддерживает данный функционал из коробки - документация и пример приложения

Зависимостей, как правило нет. Но можно сделать вложенные редьюсеры:

const myReducer = combineReducers({ connectedReducer1, connectedReducer2 })

PS для форм используйте redux-form.

UPD1 При этом вы можете вручную вызывать вложенные редьюсеры:

function combinedReducer(state = initialState, action = {}) {
  switch(action.type) {
    case SOME_COMPLEX_ACTION:
      return {
         ...state,
         someProp: someOtherReducer(state.someProp, { type: OTHER_ACTION, payload: action.payload.something })
      }
    default:
      return {
         ...state,
         someProp: someOtherReducer(state.someProp)
      }
  }
}

Храните тип фильтра в store а не в state. Затем фильтруйте из общего массива по этому фильтру во время mapStateToProps (изменение фильтра - это экшн). При этом не плохо бы использовать reselect.

function mapStateToProps(state) {
  const filter = state.something.filter
  const items = state.other.items
  return {
    items: filterItems(items, filter)
  } 
}
connect(mapStateToProps)(...)

Вам довольно сильно придется поменять структуру. Всю логику перенести в экшен креаторы, хранение стейт в редьюсеры. Компоненты сделать dumb + несколько контроллеров. Продумать селекторы, и т.д.

И в принципе, это другая (более строгая) концепция приложения. Но без redux (flux) никак.

Чтобы передать props из UserHome в NewPatient нужно чтобы последний был дочерним роутом первого:

В camelCase не стоит делать path - т.к. он регистронезависимый

<Router history={hashHistory}>
  <Route path="/" component={UserHome}>
    <Route  path="NewPatient" component={NewPatient}  />
  </Route>
</Router>

Тогда в UserHome надо делать так:

return (
  <div className="UserHome ">
    {this.props.children && React.cloneElement(this.props.children, {
      patientUr: this.state.patient_ur
    })}
  </div>
)

Вам нужно не внутри компонента с интервалом рендерить а снаружи перерисоввывать компонент, передавая разные props
Самый упрощенный вариант:

class MyContainer extends Component {
  constructor() {
    this.state = { nums: [] }
  }
  
  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({
        nums: [
          ...this.state.nums,
          (this.state.nums[this.state.nums.length-1] || 0) + 1
        ],
      })
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    retrurn (
      <div>
       {this.state.nums.map((n, i) => (<b key={i}>Number is: {n}</b>)}
      </div>
    )
  }
}

Насколько я понял, у вас есть две сущности (одна - root и одна в elements). Тогда это дело лучше хранить в нормализованном состоянии: делам два редьюсера, каждый работает со своей сущностью, а в селекторе денормализуем. При этом хранить сущности удобнее как { id: entity } объект, а не как массив.

// rootEntity reducer
const initialState = {
  entities: {}
}

function rootEntityReducer(state = initialState, action = {}) {
  switch(action.type) {
    case ADD_ELEMENT:
      const { targetEntityId, element } = action.payload
      const targetEntity = state.entities[targetEntityId]
      return {
        ...state,
        entites: {
          ...state.entities,
          [targetEntityId]: { ...targetEntity, elements: [ ...targetEntity.elements, element ] }
        }
      }
    default:
      return state
  }
}

UPD1 если entities - массив

// rootEntity reducer
const initialState = {
  entities: []
}

function rootEntityReducer(state = initialState, action = {}) {
  switch(action.type) {
    case ADD_ELEMENT:
      const { targetEntityId, element } = action.payload

      return {
        ...state,
        entites:  state.entities.map(
          entity => entity.id !== targetEntityId
            ? entity
            : { ...entity , elements: [ ...entity.elements, element ] }
        )
      }
    default:
      return state
  }
}