Làm thế nào để tải một thành phần phản ứng được viết bằng mã JSX từ mã Javascript của tôi

Question

Tôi mới dùng reactjs vì vậy hãy tha thứ cho tôi nếu tôi không thể cụm từ câu hỏi này đúng cách. Vì vậy, tôi có tệp tập lệnh jsx này sẽ hiển thị các thành phần phản ứng của tôi vào chế độ xem của tôi ngay sau khi được tải. Ban đầu trong tập tin kịch bản này tôi không có bất kỳ dữ liệu nào để hiển thị trong thành phần của tôi, vì vậy tôi không hiển thị bất kỳ thành phần phụ nào của tôi. Tuy nhiên tại một số điểm sau này, khi tôi nhận dữ liệu từ, nói một dịch vụ web, tôi rất muốn render các thành phần một lần nữa với dữ liệu đó.

Các thành phần trong tệp kịch bản JSX của tôi không có trạng thái, nó chỉ đơn giản là nghĩa vụ hiển thị dữ liệu tôi chuyển vào đó.

Tập lệnh JSX tải tốt và hiển thị các thành phần ban đầu không có dữ liệu được chỉ định trong chính tệp JSX. Tuy nhiên, khi tôi cố gắng hiển thị lại thành phần đó trong một tệp Javascript khác, nó cung cấp cho tôi một lỗi tham chiếu, thành phần không xác định.

Quốc gia JSX,/*** @jsx React.DOM */có tạo không gian tên hoàn toàn khác không? Nếu vậy làm thế nào tôi có thể truy cập nó? Và cách tốt nhất để kết xuất lại các thành phần với dữ liệu mới từ bên ngoài tệp kịch bản JSX của bạn là gì. Cảm ơn trước! :)

/** Đã chỉnh sửa */ guys, xin lỗi vì không thêm mã .. thay vào đó hãy để tôi đặt câu hỏi đơn giản .. làm cách nào để truy cập vào thành phần phản hồi trong tập lệnh jsx của tôi từ tệp javascript?

/** Sửa */ kẻ Được rồi, đây là một ví dụ mã:

var Avatar = React.createClass({ 
render: function() { 
return (
    <div> 
    <ProfilePic username={this.props.username} /> 
    <ProfileLink username={this.props.username} /> 
    </div> 
); 
} 
}); 

var ProfilePic = React.createClass({ 
render: function() { 
return (
    <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> 
); 
} 
}); 

var ProfileLink = React.createClass({ 
render: function() { 
return (
    <a href={'http://www.facebook.com/' + this.props.username}> 
    {this.props.username} 
    </a> 
); 
} 
}); 

React.render(
<Avatar username="pwh" />, 
document.getElementById('example') 
); 

Vì vậy, các mã trên có thể được nhúng trong các thẻ html của bạn specifed như kịch bản jsx hoặc nạp từ bên ngoài. Lưu ý tên người dùng prop trong phần tử Avatar (thành phần phản ứng cao nhất trong chế độ thừa kế), vấn đề là làm thế nào chúng ta có thể đổi lại thành phần Avatar trong một tệp javasccript khác bằng một tên người dùng khác? Tất cả tốt và tốt, nếu bạn thiết lập nó như thế này và chạy. Lần tải thành phần đầu tiên, nó đặt pwh làm tên người dùng. Tuy nhiên, làm cách nào tôi có thể truy cập phần tử này từ javascript của tôi (ví dụ: bên ngoài tập lệnh jsx) và đặt lại nó với giá trị tên người dùng mới? Thậm chí có thể không?

Answer 1

Tôi nghĩ rằng bạn đang gặp sự cố b/c trong khi tệp JS thuần tuý đang thực thi, tệp JSX vẫn đang được JSXTransformer dịch, do đó trình duyệt không xử lý. Do đó những biểu tượng bên trong các tập tin JSX chưa được định nghĩa

Có hai phương pháp Tôi muốn giới thiệu:

Đối với mục đích phát triển/Nguyên mẫu: thêm /** @jsx React.DOM */ đến tập tin JS đồng bằng là tốt, và chắc chắn để bao gồm này js tập tin trong trang HTML dưới dạng type="text/jsx" để Biến áp cũng sẽ cố gắng dịch.

Đối với mã đó có nghĩa là để đi vào sản xuất, cài đặt trình biên dịch jsx npm install -g react-tools, sau đó chạy jsx <src file> <output filename> để chuyển đổi tập tin JSX của bạn để javascript thường xuyên

thấy điều này: http://facebook.github.io/react/docs/tooling-integration.html

tái bút: bạn đang gói điểm vào ứng dụng của bạn bên trong một cuộc gọi lại DOM.ready hoặc một cái gì đó tương đương phải không?