如何在使用React進行渲染時獲取子元素值？

Question

我想自動將value='foo'屬性插入選項元素，以便在元素重新呈現時可以輕鬆地從保存的狀態中選擇選項。

目前我可以手動添加價值，它的工作原理，但我試圖在呈現這樣的孩子時自動化。但是我找不到價值。有任何想法嗎？

// form.jsx 
<Select 
    label='Select a thing' 
    name='things' 
    updateForm={update} 
    formState={fstate}> 

    <option>Foo</option> 
    <option>Bar</option> 
    <option>Baz</option> 
</Select> 


// Select.jsx 

Select = React.createClass({ 

    // pass this.name down to this.props.children manually 
    renderChildren: function() { 
    return React.Children.map(this.props.children, function (child) { 
     debugger 
     // can't find "foo", "bar" here 
     return React.addons.cloneWithProps(child, { 
     name: this.props.name, 
     value: (get child value) 
     }); 
    }.bind(this)); 
    }, 

    handleChange(e) { 
    var value = e.currentTarget.value; 
    // save to db and save to formState 
    this.props.updateForm(this.props.name, value); 
    }, 

    render() { 
    return (
     <div> 
     <label>{ this.props.label }</label> 

     <select 
      onChange={this.handleChange} 
      defaultValue={ this.props.formState[this.props.name] }> 

      { this.renderChildren() } 
     </select> 
     </div> 
    ); 
    } 

}); 


// render this HTML 

<div> 
    <label>Select a thing</label> 

    <select class="form-control" > 
    <option name="thing" value="foo">foo</option> 
    <option name="thing" value="bar">bar</option> 
    <option name="thing" value="baz">baz</option> 
    </select> 
</div> 

Answer 1

的的Select元素的兒童是option的列表，檢索值內，你只需要檢查每個元素的兒童。

return React.Children.map(this.props.children, function(child) { 
    // can't find "foo", "bar" here 
    return React.addons.cloneWithProps(child, { 
    name: this.props.name, 
    value: child.props.children 
    }); 
}.bind(this)); 

如果該選項的內容僅文字，你可以用child.props.children屬性直接訪問它。

例如，

<option>Bar</option> 

如果內容比較複雜（該選項不應該有內部的任何HTML標籤，但也許由於某種原因，你需要它），你必須檢查值，並添加一些邏輯

<option>Foo <span>bar</span></option> 

用簡單的console.log(child.props.children)可以看到子元素的結構。