Trong phản ứng, tôi có thể hiển thị con của thành phần mà không có trình bao bọc không?

Question

tôi muốn làm:

render:() -> 
     {@props.children} 

Nó được làm cho tôi làm:

render:() -> 
     <div>{@props.children}</div> 

Lý do tôi muốn làm trước đây là vì con cái render đã bối cảnh chủ sở hữu của họ dựa trên thiết lập. Nhưng nếu tôi hiển thị chúng với trình bao bọc thì phần tử đó là phần tử cha không có tập hợp ngữ cảnh của nó. Điều này sau đó tạo ra một cảnh báo:

chủ sở hữu có trụ sở và phụ huynh dựa trên bối cảnh khác nhau (giá trị: undefined vs [object Object]) cho khóa (x)

này được thảo luận ở đây: https://gist.github.com/jimfb/0eb6e61f300a8c1b2ce7

Nhưng không có giải pháp được cung cấp .

Cảnh báo xảy ra vì thành phần hiển thị cho trẻ là 'chủ sở hữu' và đó là cài đặt ngữ cảnh nhưng phần tử trình bao bọc div là 'gốc' và không có ngữ cảnh. Ý tưởng của tôi là loại bỏ div. Nhưng tôi không thể loại bỏ nó.

Answer 1

Tôi đã sử dụng đoạn mã sau để chỉ sử dụng một wrapper <span> trên text trẻ em:

render() { 
    if (!this.props.children) { 
    return null; 
    } else if (React.isValidElement(this.props.children)) { 
    return this.props.children; 
    } 
    return <span>{this.props.children}</span>; 
} 

Answer 2

Trong tình huống mà một đứa trẻ duy nhất được yêu cầu:

render() { 
    return React.Children.only(this.props.children) 
} 

Đây là những gì phản ứng-Redux sử dụng trong connect(), FWIW.