Passer un composant réagissent comme un param à un autre composant React

voix
0

Je suis à la recherche d'un moyen de passer un réagir comme à d'autres param réagir et d'y accéder: Je l'ai essayé quelque chose comme:

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

Mais je reçois la valeur JSX doit être soit une expression ou un pointage texte JSX cité à document.getElementById('someDiv')

EDIT Après avoir corrigé une erreur de syntaxe que je reçois:

: Unexpected tokenErreur pointant vers le symbole <à[{<someOtherReactFunction

Toute aide est grandement appréciée.

Créé 22/03/2016 à 22:16
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Voici comment vous devez structurer votre code:

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'));

Vos composants peuvent être très dynamiques. Rendu peut avoir une logique en elle, il n'a pas besoin d'être une vue statique. Tout ce qu'il doit nous être « pur », qui dans React monde signifie déterministe: donner un composant les mêmes accessoires / état et à chaque fois il devrait vous donner la même rendre la sortie.

Créé 22/03/2016 à 23:01
source utilisateur

voix
0

ce ne peut pas être la meilleure pratique, mais ce que j'eu le temps tentais de faire:

Passez le composant intérieur comme réagir valueà un objet avec quelques espaces de noms propertyquelque chose comme:

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

Et dans votre someReactFunctionboucle de fonction sur le tableau et faire quelque chose comme:

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);
 }
});

De cette façon, je l'ai ajouté des fonctionnalités plus dynamiques pour un composant d'interface utilisateur donné. Est-ce la meilleure pratique ?? Probaly pas ... mais, me aide ce que je suis en train de achieve..if quelqu'un a une meilleure solution s'il vous plaît moi de cela.

Créé 23/03/2016 à 03:00
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more