如何在渲染中使用内部函数渲染多个 div

Question

I can't figure this out, I tried to use in render but still failed, how to fix this problem?

render() {
        return (
          {
            <div className="ABC">
              <a>ABC</a>
            </div>
            <div className="DEF">
          }
          {*Some function create inner html content*}
          {
            </div>
          }

I tried to add tag but it seems like still got the error...

Answer 1

The render method can only return a single root node. You can either wrap everything in a single element (such as a <div> ), or use react fragments

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

You will also see the above written in short Syntax as:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Answer 2

You need to have a single closing element for JSX. This might help :

function bar(){
    return (
          <div>
             Some other content
          </div>
    );
function foo(){
    return (
         <React.Fragment> 
                 <div>
                     Some Content in here
                     { bar() }
                 </div
         </React.Fragment> 
    );

render(){
    return(
        { foo() }
    )

}

Answer 3

You will have to use a single div tag. You can do this by

    function foo(){
        return (
             <div> New content here </div>
        );

    render(){
        return(
           <div className="ABC">
              <a>ABC</a>
              { foo() } 
           </div>
        )
    }