Question

在角度，我可以在一个元素上应用两个指令。

$this->form_validation->set_rules('photo', 'Passport Photo', 'required');

反应中的等价物是什么？

Answer 1

你可以这样做

var FirstComponent = React.createClass({
    render: function() {
        return <div>FirstComponent</div>;
    }
});

var SecondComponent = React.createClass({
    render: function() {
        return <div>SecondComponent</div>;
    }
});

var MainComponent = React.createClass({
    render: function() {
        return <div>
            <FirstComponent />
            <SecondComponent />
        </div>;
    }
});

Example

Answer 2

也许您可以使用fragemts，https://reactjs.org/docs/fragments.html

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

Answer 3

您可以尝试将该组件由另一个组件呈现，如下所示：

render() {
    return (
        <div>
           <h1>I am your father</h1>
           <Child />
        </div>
    );
}

这在CodeCademy的Tutorial中进行了解释

Answer 4

在 App.js 中试试这个：

    import Component1 from './components/Component1';
    import Component2 from './components/Component2';
    import Component3 from './components/Component3';
    export default function App() => <><Component1 /><Component2 /><Component3 /></>

Answer 5

我也写了这个可能有用的函数。这个函数的优点是，当你把它传递给函数时，如果组件由于任何原因还没有被创建，它不会join(show) undefined或null。

/**
 * Joins html or react blocks/ components with a separator if they exist
 * @param arrayOfComponents - array of components or html blocks
 * @param joiner - can be string, other react component or a html tag block
 */
export const joinReactComponentsIfExistWithSeparator = (arrayOfComponents, joiner) => arrayOfComponents.filter(Boolean).map((item, index) =>
    <span>{index !== 0 && joiner}{item}</span>);

您可以在 React 组件中传递如下组件或 HTML 块：

const component1=<div>content 1</div>;
const component2=<div>content 2</div>;

<div>{joinReactComponentsIfExistWithSeparator([component1, component2], ' - ')}</div>

如何在react中合并两个组件

5 个答案: