Question

让我说我有这个反应组件引用TextInput。我希望这个组件是

<input type="text">和<textarea>也是如此，但是没有ifs，因为传递了投放道具，但是我的渲染器在元素上获得了额外的东西，如下所示：

   render() {
      return (
            <label>
            <strong>{this.props.name}</strong>
               <input type="text" ref={ component => { this.input = component; } } name={this.props.name} onChange={this.handleChange} value={this.state.value} />
            </label>
      )
   }

我最初的想法是做这样的事情

myInputProps = { type: (<input type="text"/>) }

所以在我的元素中我会把它简单地渲染为

  {this.props.type}

但是，我怎么能把所有这些额外的东西传递给元素，如ref，name，onchange等？对这个问题有什么好处？我可以做一些ifs并检查我应该渲染什么，这取决于组件状态等，但我不确定那将是最好的。

Answer 1

您需要的是：

render() {
  var input = this.props.type;
  input.props = { 
      ...input.props, 
      ref: (component) => { this.input = component;},
      onChange: this.handleChange,
      value: this.state.value
  };

  return (
        <label>
           <strong>{this.props.name}</strong>
           {input}
        </label>
  )
}

Answer 2

render() {
  return (
        <label>
        <strong>{this.props.name}</strong>
           {this.props.children}
        </label>
  )}

Answer 3

我主张使用单独的<TextInput>和<TextArea>组件，但如果您真的需要灵活性，请使用渲染道具：

使用render道具：

render() {
      const props = {
          ref: component => this.input = component,
          name: this.props.name,
          onChange: this.handleChange
      };
      return (
            <label>
            <strong>{this.props.name}</strong>
               { this.props.render(props) }
            </label>
      )
   }

然后使用它：

<TextInput name="foo" render={ props => <input ...props /> } />

反应动态Html标签

3 个答案: