How to add – Felix Kling Jul 07 '15 at 18:53

Answer 1

I know this is old, but i stumbled upon this recently and here is the best solution i found (i'm using it for browser polyfills, but it works for any code):

render: function() {
  return (
     <div>
        <SomeReactClass somefunction="myFunction">
        <script
          dangerouslySetInnerHTML={{ __html:
            `function myFunction(index, row) {return index;}`
          }}
        />
     </div>
  );
}

Answer 2

Inside JSX, {...} denotes a JavaScript expression. return index; on its own is not a valid expression.

You have to explicitly create a string so that the {...} are not interpreted by JSX. Template literals may be the easiest solution:

<script>{`
    function myFunction(index, row) {
        return index;
    }
`}</script>

However, I have a hard time coming up with a reason why one would want to create a <script> dynamically.

---

What you should probably do is pass the function directly to the component:

function myFunction(index, row) {
    return index;
}

var Component = React.createElement({
  render: function() {
    return (
      <div>
        <SomeReactClass somefunction={myFunction} />
      </div>
    );
  }
});

But it's hard to tell without you explaining what you are really trying to achieve here.

Answer 3

i think youre just looking for interpolation of your JS

function myFunction(index, row) {
  return index;    
}
render: function() {
  return (
    <div>
      <SomeReactClass somefunction={myFunction}>
    </div>
  );
}

to interpolate javascript in jsx utilize curly braces {}
https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

per your edit:
again, you need to be using the braces to interpolate your function. so inside of SomeReactClass you need to be doing something like this in the render function:

<div>{this.props.myFunction(index, row)}</div>

most notably, you need to not only interpolate the function, by you also need to be executing it.

Answer 4

You should try this:

function myFunction(index, row) {
  return index;    
}

render: function() {
 return (
      <div>
        <script
            dangerouslySetInnerHTML={{ 
              __html:myFunction() 
        
            }}
        />
      </div>
      );
}