синтаксического анализа тела реагировать тег

Question

Предположим, что мы имеем:

class Email extends React.Component{ 

    constructor(props){ 
     super(props); 
    } 
    validate(){ 
     return true; 
    } 
    render(){ 
     <input placeholder={this.is.what.i.ask.for.to.be.parsed.from.its.body} onFocus={this.validate} /> 
    } 
} 

Теперь Когда я resue его, я хочу позвонить:

<Email > 
    someone@company.com 
</Email> 

Как разобрать someone@company.com из тела Email тега.

---

Я знал, что это может быть сделано путем вызова <Email holder="someone@company.com" /> & я должен обновить render по this.props.holder.

Таким образом, мы получаем доступ к Атрибутам Реагирования на this.props, ОДНАКО, Есть ли что-то, чтобы получить доступ к его телу со встроенным способом?

Answer 1

Если я вас правильно понял, то вы должны использовать this.props.children:

render() { 
    return (<input placeholder={this.props.children} onFocus={this.validate} />); 
} 

Как в стороне, помните, что вы должны связать this для onFocus обратного вызова! Распространенный способ сделать это из конструктора:

constructor(props) { 
    super(props); 
    this.validate = this.validate.bind(this); 
} 

Answer 2

this.props.children дает доступ к детям в качестве компонента. В этом случае содержимое адреса электронной почты будет считаться дочерним элементом Email Компонент.

Возможно, было бы лучше использовать утилиту React.Children.only, чтобы убедиться, что существует только один ребенок.

Что-то, как это должно работать:

class Email extends React.Component{ 

    constructor(props){ 
     super(props); 
    } 
    validate(){ 
     return true; 
    } 
    render(){ 
     return <input placeholder={React.Children.only(this.props.children)} onFocus={this.validate} />; 
    } 
}