如何在 JSX 中添加函数？

Question

How do I add a JavaScript function in React, is this possible? I get 'function is not valid'....

//Main component 
function Main () {

const vanilla_JS = function() { console.log('testing')}

 return (
  <main>
   <div>{vanilla_JS}</div>
  </main>

 )
}

ReactDOM.render(<Main />, document.getElementById('root');

Answer 1

1) You're missing a closing bracket on the ReactDOM line:

ReactDOM.render(<Main />, document.getElementById('root'));

2) You need to call the function for it to work

vanilla_JS()

In this working example instead of logging to the console I'm returning a string:

 function Main() { const vanilla_JS = function() { return 'testing'; } return ( <main> <div>{vanilla_JS()}</div> </main> ); } ReactDOM.render(<Main />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>