Question

我想创建一个包含一些元素的数组，然后对其进行迭代（使用.forEach或.map）。但每个数组元素必须具有不同的样式。例如，我有一个像这样的数组：

["johnny red", "Stephanie blue", "Hans green", "Fifty Shades Of grey :d"]

另外，我想在另一个组件中重用一些数组的单个元素。我该怎么办？

（想象每个元素中的最后一个单词是一种单独的样式，例如background-color或color）

你能帮我吗？请给我一个建议，我该怎么办？

Answer 1

您的意思是这样的吗？该代码段位于下面，这是代码库示例：https://codepen.io/tormod17/pen/apvXoW?editors=0010

还，您是否考虑过将带样式的组件与react合并？它可以帮助这个项目。 https://www.styled-components.com/docs/basics

   {children.map(element => {
   return (
      <element.type
       {...element.props}
       style={{
         height: '33%',
       }}
      />
   )
 })}

这是来自另一个项目：

          import * as React from "react";
          import { IAddressListProps } from '../../detailPage/components/interfaces/IAddressListProps';
          import { config } from "../../config";

          export class PrintAddressList extends React.Component<IAddressListProps, {}>{
            constructor(props: IAddressListProps) {
              super(props);
            }
            private createAddressCard = () => {
              let parent = [];
              this.props.items.map((address) => {
                parent.push(<div style={{ padding: '10px', border: '1px solid #ccc', margin: '5px' }}>
                  <label>{config.colNames.addressList.clmnAddressType}: </label>
                  <label>{address.Adressart}</label><br />
                  <label>{config.colNames.addressList.clmnCompanyName}: </label>
                  <label>{address.Firma}</label><br />
                  <label>{config.colNames.addressList.clmnPlaceName}: </label>
                  <label>{address.Ort}</label><br />
                  <label>{config.colNames.addressList.clmnZipCode}: </label>
                  <label>{address.PLZ}</label><br />
                  <label>{config.colNames.addressList.clmnTelephone}: </label>
                  <label>{address.Telefon}</label><br />
                </div>);
              });
              return parent;
            }

            public render(): React.ReactElement<IAddressListProps> {
              return (
                <div>
                  {this.createAddressCard()}
                </div>
              );
            }
          }

Answer 2

有很多方法可以实现这一点，关键的区别在于您如何表示value-style对。

最终，您需要将值映射到其样式。

对于example：

const myStyles = {
  'johnny red': { color: 'red' },
  'Stephanie blue': { color: 'blue' },
  'Hans green': { color: 'green' },
  'Fifty Shades Of grey :d': { color: 'pink' }
};

export default function App() {
  return (
    <FlexBox>
      <FlexItem>
        {Object.entries(myStyles).map(([key, style]) => (
          <div key={key} style={style}>
            {key}
          </div>
        ))}
      </FlexItem>
    </FlexBox>
  );
}

Answer 3

不清楚您想要什么，但是您可以将样式附加到组件上，如下所示：

const values = [
  {
    text: "one",
    css: { color: 'blue' }
  },
  {
    text: "two",
    css: { color: 'red' }
  },
];

const Test = props => {
  const { values } = props;
  
  return (
    <div>{values.map(
      (value, i) => <div key={i} style={value.css}>{value.text}</div>
    )}</div>
  );
}

ReactDOM.render(
  <Test values={values} />,
  document.getElementById("react")
);

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

Reactjs，用不同的样式设置数组的每个元素

3 个答案: