can you pass a component through props to children

morne

can you pass a component through props to children

var TaskForm = require('../../../../components/assessment/tasks/TaskForm.react');

render: function() {
    return (
        <div>
            <div className="row">
                <div className="col-xs-12 col-lg-12">
                    <GroupsItemsAccordionWrapper
                         TaskForm=TaskForm
                    />
                </div>
            </div>
        </div>
    );
}
Pavlo

Yes, you can pass any value as a prop, including an object returned by React.createClass (aka component class). Assuming you are implementing dependency injection:

var TaskForm = React.createClass({
  render: function() {
    return (
        <div>{this.props.children}</div>
    );
  }
});

var GroupsItemsAccordionWrapper = React.createClass({
  render: function() {
    var TaskForm = this.props.TaskForm;
    return (
        <div>
          <TaskForm>Hello, world!</TaskForm>
        </div>
    );
  }
});

ReactDOM.render(
  <GroupsItemsAccordionWrapper TaskForm={TaskForm} />,
  document.getElementById('container')
);

(Note the curly brackets around TaskForm={TaskForm}).

Demo: https://jsfiddle.net/69z2wepo/37477/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to pass props through this.props.children() not this.props.children

Vue 3: Slots Attributes - Can you pass data through props?

Pass props to {children()} for use in component of child page

React.createElement pass props to children component

Typescript: Pass component given props to the component's children prop

How to pass props through Route to Component in React

Unable to pass props to component through navigationOptions?

How can I pass props to children of children in React?

React: Pass component as prop without using this.props.children

react-responsive: cannot pass props to children of a Responsive component

How can I pass params into children component

TypeScript pass props to children

Can you pass props to a JSX reference?

Can I pass props to the children via props.children React JS

How can you pass styles through to a container component in React-Native

How can I pass props to children of React Router?

Can't pass children with props using React.cloneElement?

Unable to pass props to component through react-router

Pass props through a higher order component from a Route

How to pass in navigation props into a functional component screen through React Navigation?

How do you pass additional props to a functional component in React?

Can I pass optional props to a component in Vuejs so they are passed to a component?

How can I pass props to base component in styled-component?

How can i pass a component to another component via props

Transfer component in props with children method

Can you pass through a variable to Insets in FXML?

react - can you mutate modify this.props.children to dynamically (programatically) add children components

React Pass props to children with PokeApi

Pass props to all of its children

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive