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} />  
   }
 }

现在，当我恢复时，我想打电话：

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

如何从someone@company.com标记的正文中解析Email。

我知道可以通过致电<Email holder="someone@company.com" />＆amp;我必须render更新this.props.holder。

因此，我们通过this.props访问React属性，但是，是否有东西可以通过内置方式访问它的主体？

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可让您访问Component的子级。在这种情况下，电子邮件地址内容将被视为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} />;  
   }
 }

解析反应标记的主体

2 个答案: