ReactJS cho inst.render không phải là một lỗi chức năng

Tôi đã hiển thị một Hello World thực sự cơ bản với React và ReactDOM khi tôi gặp lỗi lạ Uncaught TypeError: inst.render is not a function. Xem trong số này JSBin.ReactJS cho inst.render không phải là một lỗi chức năng

Tôi đã sử dụng React rất nhiều, nhưng mới đối với ES6. Bất kỳ ý tưởng gì tôi không thấy ở đây?

Lỗi có vẻ như là nói rằng Hello không có phương thức render, nhưng tôi không chắc chắn.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script src=" 
       https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js" type="text/javascript"></script> 
    <script src="https://fb.me/react-0.14.0.js"></script> 
    <script src="https://fb.me/react-dom-0.14.0.js"></script> 
</head> 
<body> 
    <div id="root"></div> 

    <script> 
const Hello =() => { 
    <h1>Hi</h1> 
}; 

const foo =() => { 
    ReactDOM.render(
    <Hello />, 
    document.getElementById('root') 
); 
} 

foo(); 
</script> 
</body> 
</html>

Nguồn

2015-12-10 Don P

Cập nhật

Bạn cũng có thể sử dụng function, hoặc arrow trong trường hợp của bạn. Tuy nhiên bạn cần trả lại thành phần.

const Hello =() => <h1>Hi</h1>;

Lưu ý các dấu ngoặc nhọn bị thiếu. Trong ES6, arrow function không có dấu ngoặc nhọn trả về kết quả của biểu thức cơ thể của nó.

gốc

Để sử dụng Phản ứng với ES6, bạn cần phải kế thừa lớp React.Component.

class Hello extends React.Component { 
    render() { 
    return <h1>Hi</h1> 
    } 
}

Xem here tại tài liệu của tài liệu.

Nguồn

2015-12-10 08:34:53 PSWai

Lạ - tác giả của Redux chỉ sử dụng 'const MyComponenter =() => {...}' trong video này: https://egghead.io/lessons/javascript-redux-react-counter-example #/tab-thảo luận. Làm thế nào mà làm việc? –

Ah, bạn cần trả lại phần tử nếu bạn đang sử dụng hàm thuần túy. (Xem chỉnh sửa) – PSWai

Wow, thật tuyệt vời. Cảm ơn bạn đã thông báo :) –

Tôi gặp lỗi này khi một thành phần tôi đã hiển thị là undefined. Tôi chưa bao giờ thấy lỗi trước đây. Ứng dụng của tôi cũng đang sử dụng redux.

Trong trường hợp của tôi, nó chỉ là một thành phần <Book /> trong phương pháp render() chưa được xác định.

Vì vậy, việc sửa chữa đã được dễ dàng:

import Book from './Book'

Lời khuyên của tôi nếu bạn chạy vào vấn đề này là để kiểm tra render phương pháp của các thành phần chứa và xem nếu bất kỳ thành phần bạn đang cố gắng để render chưa được xác định.

Có vẻ như rất xa lạ với tôi, Nó sẽ cung cấp cho các lỗi sau:

của router (trong lời hứa) ReferenceError: Sách không được định nghĩa

Nguồn

2016-02-19 01:40:54

Một giải pháp khác là sử dụng một implicit return. Đơn giản chỉ cần quấn sự trở lại của Hello thành phần trong ngoặc đơn thay vì niềng răng, như vậy (JSBin)

const Hello =() => (
    <h1>Hi</h1> 
);

Nguồn

2016-03-23 02:55:01 thetrystero

tôi đã nhận lỗi này bởi vì tôi đã vô tình gọi return someObj trong thành phần của tôi constructor. Một khi tôi gỡ bỏ nó, vấn đề được giải quyết.

Nguồn

2017-04-01 19:10:37

Cảm ơn vì điều này! Tôi đã được sử dụng để getInitialState() và trả về một nhà nước từ các nhà xây dựng quá! Chúc mừng! –

Tôi gặp lỗi này khi tôi thêm static từ khóa vào thành phần ứng dụng theo đề xuất của webstorm/lint.Thử xóa bất kỳ tĩnh từ khóa nào. static App extends Component {...

Nguồn

2017-08-08 14:29:24 JimSTAT

ReactJS cho inst.render không phải là một lỗi chức năng

Trả lời

Các vấn đề liên quan