javascript - ReactJSX - changing element type conditionally with minimal code duplication - Stack Overflow

admin管理员组

文章数量:1221846

Let's say I have something that is:

<div>
  {/* a lot of code */}
</div>

But if some condition is true, I want it to be:

<tr>
  {/* same code as before */}
</tr>

Is there any way to achieve this without a huge amount of code duplication from copy pasting?

Let's say I have something that is:

<div>
  {/* a lot of code */}
</div>

But if some condition is true, I want it to be:

<tr>
  {/* same code as before */}
</tr>

Is there any way to achieve this without a huge amount of code duplication from copy pasting?

• javascript
• reactjs

Share Improve this question Follow edited Jun 30, 2018 at 10:23 Tholle 113k2222 gold badges208208 silver badges196196 bronze badges asked Jun 30, 2018 at 5:09 rococorococo 2,65722 gold badges2525 silver badges4545 bronze badges 3

• Functions. Why dont you wrap the whole thing inside into a function? – Sulthan Commented Jun 30, 2018 at 5:16
• Good call, that worked fine for me. – rococo Commented Jun 30, 2018 at 5:23
• Related stackoverflow.com/questions/33710833/… – Sulthan Commented Jun 30, 2018 at 5:36

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

You could render the content in a variable using React.Fragment and choose the enclosing element depending on the condition.

Example

class App extends Component {
  state = { condition: true };

  render() {
    const { condition } = this.state;
    const content = (
      <Fragment>
        <h1>Hello world</h1>
        <h2>This is a lot of text...</h2>
      </Fragment>
    );

    return condition ? <div> {content} </div> : <tr> {content} </tr>;
  }
}

Marked someone else as accepted answer, but the solution I ended up using was to call React.createElement(condition ? "div" : "tr", {attribute: stuff}, <div>Inner content</div>). Just an alternative for anyone who stumbles upon this in the future :)

Add your code inside the function

function returnView() {
  render (
  // a lot of code
);
}

if condition is true call that function

condition? returnView() : ' '

Have you tried with createElement() method? It works well for me. So the code is:

import { createElement } from 'react';

createElement(type, props, ...children)

Example:

function Element({ condition, children, onClick }) {

  if (condition) {
    return createElement(
      'div',
      { className: 'element-style' },
      children
    );
  }

  return createElement(
    'tr',
    { className: 'element-style' },
    children
  );
}

If you have some of the special props and the rest of them is same, you can pass it in object variable

function Element({ condition, children, onClick }) {

  const elementProps = {
    className: 'element-style',
    onClick,
  };

  if (condition) {
    return createElement(
      'div',
      { ...elementProps, style: { color: 'white' } },
      children
    );
  }

  return createElement(
    'tr',
    { ...elementProps, style: { color: 'black' } },
    children
  );
}

Source: https://beta.reactjs.org/reference/react/createElement

Create a component like this

const ContentContainer = ({as, children, ...props}) => {
    return React.createElement(as ?? 'div', ...props, ...children)
}

Usage

<ContentContainer as="tr" className="main-container">
     // a lot of code
</ContentContainer>

本文标签： javascriptReactJSXchanging element type conditionally with minimal code duplicationStack Overflow