2017-05-29 7 views
0

Ich mag würde meinen klassischen HTML-App mit einigen ReactJSinitialisieren Reactjs Komponente mit Attributen

Mein vereinfacht werden kann verlängern:

<body> 
    <my-component property="abc" /> 
    <my-component property="123" /> 
</body> 

Wie kann ich Wert von property innerhalb React.Component?

+4

'Zugriff übergeben wurde this.props.property' ... Sehen Sie sich die react-Dokumentation für eine Einführung an: https://facebook.github.io/react/docs/components-and-proops.html. –

+0

Ich habe den Großteil meines HTML-Codes auf einem Backend-Server gerendert und möchte gerne zusätzliche interaktive Funktionen mit React-Komponenten erstellen. Problem, das ich habe, ist, wie man Daten von statischem HTML zu React-Komponente übergibt. Mit Backbone würde ich Daten-* Eigenschaften verwenden, aber ich kann nicht herausfinden, wie man darauf zugreifen kann (Daten auf Container-Element) – Fuxi

Antwort

0

Ich weiß nicht, ob ich Ihre Frage verstanden habe, aber wenn Sie eine HTML-Komponente erweitern möchten, sollten Sie Spread-Attribute verwenden. https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Anpassen eines Bildes:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const MyImage = (props) => { 
    // get your customized atribute 
    const {log, alt, ...properties} = props; 

    // Do wherever you want 
    console.log(log); 

    // Pass the rest to the image 
    return <img alt={alt} {...properties}/>; 
}; 

ReactDOM.render(
    <MyImage log="logging action" 
     alt="React logo" 
     style={{ width: "400px", height: "400px"}} 
     src="https://cdn.worldvectorlogo.com/logos/react.svg" />, 
    document.getElementById('root') 
); 

Hinweis: Um zu verstehen, warum die alt atribute nicht mit anderen Eigenschaften Link https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/7

+0

Ich habe die meisten meiner HTML auf einem Backend-Server gerendert und ich möchte einige zusätzliche interaktive Funktionen mit React machen Komponenten. Problem, das ich habe, ist, wie man Daten von statischem HTML zu React-Komponente übergibt. Mit Backbone würde ich Daten * Eigenschaften verwenden, aber ich kann nicht herausfinden, wie man darauf zugreifen kann (Daten auf Container-Element) – Fuxi

Verwandte Themen