2017-02-21 58 views
1

Я хотел бы создать Выпадающая карточка: Компонент: <Dropdown />.Как создать компонент Dropdown в зависимости от других компонентов в React JS?

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

Этот обработчик может быть любым: простым HTML, строкой или компонентом.

Этот контент для показа может быть любым: Простым HTML, Строком или Компонентом.

Как я могу это структура Dropdown? Я хотел бы использовать его в любом месте приложения.

У меня есть это в виду.

<div id="Page2"> 
    <Dropdown> 
    <Avatar /> 
    <Menu> 
     <li>Settings</li> 
     <li>Logout</li> 
    </Menu> 
    </Dropdown> 
</div> 

Но это может быть так:

<div id="Page3"> 
    <Dropdown> 
    <span>Click to show the content</span> 
    <div>Hello World</div> 
    </Dropdown> 
</div> 

Компонент:

class Dropdown extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
} 

Как сделать Avatar или <span>Click to show the content</span> как обработчик?

Прошу, потому что кажется, что компонент Dropdown имеет динамический контент, но операция такая же.

Благодаря

ответ

1

Если я вас правильно понимаю, вы ищете props.children. Это используется для передачи дочерних элементов компонента компоненту.

Например:

<DialogBox> 
    <div>Title</div> 
</DialogBox> 

В визуализации метода DialogBox компонента:

return (
    <div class="dialog-box"> 
    {this.props.children} 
    </div> 
); 

Это сделает:

<div class="dialog-box"> 
    <div>Title</div> 
</div> 

Подробнее об этом здесь: https://facebook.github.io/react/docs/composition-vs-inheritance.html#containment

+0

Чем ks man! Именно то, что мне нужно. – Steffi