javascript 反应多个子组件的条件渲染

React conditional rendering of multiple child components

提问by silversurfer

I'm trying to render multiple child components depending on state however I'm only able to return one child component (SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag)

我正在尝试根据状态呈现多个子组件，但是我只能返回一个子组件（SyntaxError：Adjacent JSX 元素必须包含在封闭标记中）

Each child component passes the same props, how could this code be kept DRY?

每个子组件都传递相同的 props，这段代码怎么能保持 DRY？

Works

作品

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <span>Navigation</span>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
              : null
            }
    </Navigation>
)

Don't

别

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                <NavigationItem handleClick={handleClick} title={'#Link-3'} />
              : null
            }
    </Navigation>
)

回答by Mayank Shukla

Directly we can't return more than one elements.

直接我们不能返回多个元素。

Possible Solutions:

可能的解决方案：

1-Either you need to wrap all the elements in a divor any other wrapper element.

1-您需要将所有元素div包装在 a或任何其他包装元素中。

2-We can return an array of multiple elements also, So put all the items in an array, and return the array.

2-我们也可以返回一个包含多个元素的数组，因此将所有项目放入一个数组中，然后返回该数组。

Like this:

像这样：

{myState ?
    [
        <NavigationItem handleClick={handleClick} title={'#Link-1'} />,
        <NavigationItem handleClick={handleClick} title={'#Link-2'} />,
        <NavigationItem handleClick={handleClick} title={'#Link-3'} />
    ]
  : null
}

Check this example:

检查这个例子：

let b = true ? [1,2,3,4]: null;

console.log('b = ', b);

This will throw error:

这将引发错误：

let b = true? 1 2 3 4: null;

console.log('b = ', b);

回答by Broda Noel

You can also use <Fragment>from ReactJS: https://reactjs.org/docs/fragments.html

你也可以<Fragment>从 ReactJS使用：https://reactjs.org/docs/fragments.html

The problem about wrapping all the elements with a <div>, is that you are adding more elements to the DOM, and sometimes it's impossible (for example, when you are rendering a <td>or <tr>inside a <table>. So, here is where <Fragment>comes to help us.

用 a 包裹所有元素的问题<div>在于，您正在向 DOM 添加更多元素，有时这是不可能的（例如，当您渲染 a<td>或<tr>在 a 内部时<table>。所以，这里是<Fragment>帮助我们的地方。

Just wrap all those elements in a <Fragment>and it'll be enough. Meaning:

只需将所有这些元素包装在 a 中<Fragment>就足够了。意义：

{ myState &&
  <Fragment>
    <NavigationItem handleClick={handleClick} title={'#Link-1'} />
    <NavigationItem handleClick={handleClick} title={'#Link-2'} />
    <NavigationItem handleClick={handleClick} title={'#Link-3'} />
  </Fragment>
}

Anyways, this another "Conditional Rendering" approach is better in "code readability" sense: https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

无论如何，另一种“条件渲染”方法在“代码可读性”意义上更好：https: //medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

It basically proposes the use of a <Conditional>element, like:

它基本上建议使用一个<Conditional>元素，例如：

<Conditional if={myState}>
  <NavigationItem handleClick={handleClick} title={'#Link-1'} />,
  <NavigationItem handleClick={handleClick} title={'#Link-2'} />,
  <NavigationItem handleClick={handleClick} title={'#Link-3'} />
</Conditional>

^ This looks better for my eyes :D

^ 这对我的眼睛来说看起来更好：D

回答by Nocebo

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <div>
                  <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                  <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                  <NavigationItem handleClick={handleClick} title={'#Link-3'} />
                </div>
              : null
            }
    </Navigation>
)

You should wrap the JSX into a <div/>

你应该把 JSX 包装成一个 <div/>