Làm cách nào để hiển thị chuỗi dưới dạng trẻ em trong thành phần React?

Question

Đi một thành phần đơn giản:

function MyComponent({ children }) { 
    return children; 
} 

này hoạt động:

ReactDOM.render(<MyComponent><span>Hello</span></MyComponent>, document.getElementById('stage')); 

nhưng điều này không (tôi loại bỏ các <span/>):

ReactDOM.render(<MyComponent>Hello</MyComponent>, document.getElementById('stage')); 

vì Phản ứng cố gắng để gọi render trên chuỗi:

Uncaught TypeError: inst.render is not a function 

Mặt khác, điều này hoạt động tốt:

ReactDOM.render(<p>Hello</p>, document.getElementById('stage')); 

Làm thế nào để làm cho <MyComponent/> cư xử như <p/>?

Answer 1

Bạn cần ít nhất một phần tử HTML cấp cao nhất. Thành phần của bạn không thể thực sự chỉ xuất ra một chuỗi, đó không phải là cách React hoạt động.

Giải pháp đơn giản nhất là chỉ cần tạo MyComponent bọc đầu ra của nó trong một khoảng hoặc div.

function MyComponent({ children }) { 
    return <span>{ children }</span>; 
} 

Answer 2

Vâng sự khác biệt là <p> là một yếu tố html và MyComponent là một Phản ứng Component.

Thành phần phản ứng cần hiển thị/trả về hoặc một thành phần đơn lẻ hoặc một phần tử html đơn.

'Hello' không phải là.

Answer 3

Phản ứng có thể hiển thị thành phần React (lớp) hoặc Thẻ HTML (chuỗi). Bất kỳ thẻ HTML nào bằng chữ thường quy ước, trong đó Thành phần được viết hoa. Mỗi thành phần React phải render chính xác một Thẻ (hoặc null). Để trả lời câu hỏi của bạn: bạn không thể.

Trong ví dụ trên, bạn hiển thị những gì được cung cấp với thuộc tính children, điều này sẽ hiển thị thẻ bên trong hoặc chuỗi không hợp lệ.

Answer 4

Hiện tại, trong kết xuất của thành phần, bạn chỉ có thể trả về một nút; nếu có , bạn có danh sách các div cần trả lại, bạn phải quấn các thành phần của mình trong một div, span hoặc bất kỳ thành phần nào khác.

source

Và những gì bạn đang trở về không phải là một nút gốc. Bạn đang trả về một thành phần phản hồi đang trả về một chuỗi mà nó sẽ trả về một phần tử HTML.

Bạn có thể vượt qua chuỗi của bạn đã được bao bọc bởi một phần tử HTML (như bạn đã làm trong ví dụ của bạn) hoặc bạn có thể quấn dây của bạn trong một phần tử HTML bên trong "myComponent" của bạn như thế này

function MyComponent({ children }) { 
    return <span>{ children }</span>; 
}