eine Komponente als param zu einem anderen Komponente Reagieren Reagieren Pass

Question

ich nach einer Möglichkeit, ein als param auf andere weitergeben reagieren reagieren und darauf zugreifen: Ich habe versucht, so etwas wie:

ReactDOM.render(
    <someReactFunction 
    param1={['test','test1']} 
    param2={[{<someOtherReactFunction someParam={testParam || ''} />}]} 
    />, 
    document.getElementById('someDiv')); 

Aber ich erhalten JSX Wert sein sollte entweder ein Ausdruck oder ein zitierte JSX Text zeigt auf document.getElementById('someDiv')

EDIT Nachdem er einige Syntaxfehler zu korrigieren erhalte ich:

: Unexpected token Fehler auf das Symbol zeigt < bei [{<someOtherReactFunction

Jede Hilfe wird sehr geschätzt.

Answer 1

kann dies nicht die beste Praxis sein, aber dazu gekommen, was ich tun wollte:

ReactDOM.render(
    <someReactFunction 
    param1={['test','test1']} 
    // `_treatAsComponent` is my specific name spaced key 
    param2={[{'_treatAsComponent' : <someOtherReactFunction someParam={testParam || ''} />}]} 
    />, 
    document.getElementById('someDiv')); 

:

Geben Sie die innere Komponente als value auf ein Objekt mit einer gewissen Namensraum property so etwas wie reagieren und in Ihrer someReactFunction Funktion Schleife über das Array und so etwas wie:

var SomeReactComponent = React.createClass({ 
    propTypes: { 
    param1: React.PropTypes.array, 
    param2: React.PropTypes.arrayOf(React.PropTypes.object).isRequired 
    }, 
    render: function() { 
    // since I have only one element I access it directly else you can loop over it if you have multiple arguments 
    //now check the key to determine action to take 
    if(param2[0]._treatAsComponent) { 
     return (<div>{item[key]}</div>); 
    } 
    else if(param2[0]._treatAsHTML) { 
     return (<div dangerouslySetInnerHTML={{__html: param2[0]._treatAsHTML}}></div>); 
    } 
    else{ 
     return(//some default handling or errors); 
} 
}); 

auf diese Weise I‘ Ich habe dynamischere Funktionen für eine bestimmte UI-Komponente hinzugefügt. Ist es die beste Praxis? Wahrscheinlich nicht ... aber, hilft mir, was ich versuche zu erreichen. Wenn jemand eine bessere Lösung hat, bitte weisen Sie mich darauf hin.

Answer 2

Hier ist, wie Sie Ihren Code strukturieren sollten:

var SomeOtherReactComponent = React.createClass({ 
    propTypes: { 
    someParam: React.PropTypes.string.isRequired 
    }, 
    render: function() { 
    var tabContent; 
    if(this.props.someParam === '') { 
     tabContent = "Oh no, this tab is empty!" 
    } else { 
     tabContent = this.props.someParam; 
    } 

    return (
     <div> 
     {tabContent} 
     </div> 
    ); 
    } 
}); 

var SomeReactComponent = React.createClass({ 
    propTypes: { 
    param1: React.PropTypes.array, 
    param2: React.PropTypes.string 
    }, 
    getDefaultProps: function() { 
    return { 
     param1: ['test', 'test1'], 
     param2: '' 
    }; 
    }, 
    render: function() { 
    return (
     <div> 
     {'This is someReactComponent. Below me is someOtherReactComponent.'} 
     <SomeOtherReactComponent someParam={this.props.param2} /> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<SomeReactComponent param2={'Awesome Tab Content'} />, document.getElementById('someDiv')); 

Ihre Komponenten können sehr dynamisch sein. Rendern kann Logik enthalten, es muss keine statische Ansicht sein. Alles, was wir sein müssen, ist "rein", was in der React-Welt deterministisch bedeutet: Gib einer Komponente die gleichen Requisiten/Zustände und jedes Mal, wenn sie dir die gleiche Render-Ausgabe geben soll.