Respondiendo a tu pregunta, si, no solo es posible enviar información tanto de las props
como del state
de un componente padre a su/s hijo/s sino que es el enfoque de React propone.
El manejo de datos en React es jerárcico y unidireccional (top-down), es decir:
El estado debe ser conocido y modificado por el elemento superior en común a los elementos hijos. Por mas info ver React docs: Lifting state up
- La información pasa de un elemento padre a un elemento hijo, el
state
es utilizado para data volátil y mutable, mientras que las props
son datos inmutables. El flujo correcto es que un padre envié su state
como prop
de su/s hijo/s, de modo que al cambiar el state
en el padre, se invoque el render()
y afecte los props
de los hijos. Es decir, los hijos modifican su comportamiento y renderizado según el estado del padre (almacenado en sus props
) y su propio estado interno.
Ejemplo: pasando desde el elemento padre hasta los elementos hoja las props
color y size

Imágen extraída de: https://www.kirupa.com/react/transferring_properties.htm
Mini ejemplo:
He implementado un mini ejemplo para visualizar esto, que basicamente se compone de una página pricipal y un menú de navegación (muy feos por cierto):
<Menu />
component:
- Mantiene en sus props un listado de elementos a mostrar, recibidos del padre
- Mantiene en sus props un booleano
showItems
- Renderiza condicionalmente los
items
según la propiedad anterior
<Page />
component:
- Mantiene en su estado si las acciones de la página están habilitadas o no
- Crea componente
<Menu />
indicando su prop showItems
para renderizado condicional
- Tiene una funcion handler para habilitar/desabilitar acciones, la cual invoca
this.setState()
y por ende de haber cambios dispara el render()
(comportamiento estandar de React)
class Menu extends React.Component{
/* renders the items conditionally */
render(){
return (
<div>
<h3> {this.props.title} </h3>
{this.props.showItems && (<ul> {this.props.items} </ul>)}
</div>) ;
}
}
class Page extends React.Component{
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
// set initial state with enableActions = true to make the checkbox checked by default
this.state ={enableActions: true};
}
render(){
{/* creates <button> for each action item */}
let actions = this.props.actions.map((item)=>{return <li><button> {item} </button></li> });
return(
<div>
<span>Enable menu actions </span>
{/* checkbox that changes the state */}
<input type="checkbox" checked={this.state.enableActions} onChange ={this.handleChange}/>
{/* (Parent State -> Child prop) - create <Menu /> passing state "enableActions" as "showItems" property */}
<Menu title="Navigation bar" items = {actions} showItems= {this.state.enableActions} />
</div>
);
}
handleChange(e){
{/* updates state with the current checked value of the checkbox */}
this.setState({enableActions : e.target.checked});
}
}
let items = ["Help","Login","About us"];
ReactDOM.render(<Page actions = {items} />, document.getElementById('root'));
body{
font-family: Tahoma;
}
button{
background: #bcd4e6;
border: 1px solid #4c8dbd;
color: #4c8dbd;
width: 70px;
}
h3{
background: #0095ff;
color: white;
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
<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>
<div id = "root">
<div>