Question

我需要一个可重用的组件，它在编码时决定了内部的任何标记类型，因此对不同的组件进行硬编码将是一个非常复杂的解决方案，因此使用函数样式来处理标记将非常棒。

这是我的沙箱：https://codesandbox.io/s/determined-clarke-gvrzv?fontsize=14

我将根据javascript变量动态修改html标记，如下所示：

let markup= "li"
function App() {
 return (
    <div className="App">
      <[markup]>Hello World</[markup]> 
    </div>
 );
}

控制台返回我：

Unexpected token

如何处理此问题？

感谢任何提示！

Answer 1

您可以这样做：

const Markup = "li";

return (
  <div className="app">
    <Markup>Hello World</Markup>
  </div>
)

我不确定您要做什么，但是您可能还考虑考虑有条件地渲染其他组件：

const temperature = -20;

return (
  temperature < 30 ? <Cold /> : <Warm />
);

或有条件地内联交换标记：

const isCold = temp => temp < 30;

const temperature = -12;

return (
  isCold(temperature) ? <div>Brrr!</div> : <span>Sunshine!</span>
);

最后，如果您有很多可能的变体，则可以建立一个getComponent函数来确定要渲染的内容：

const SeasonalComponents = [
  {
    handles: temp => temp < 0,
    component: () => <div>Brrr!</div>
  },
  {
    handles: temp => temp < 30,
    component: () => <div>Get your coat!</div>
  },
  {
    handles: temp => temp < 50,
    component: () => <div>Just a jacket</div>
  },
  {
    handles: temp => temp < 100,
    component: () => <ImportedSummerComponent />
  }
];

function getComponent (temperature) {
  const seasonal = SeasonalComponents.find(x => x.handles(temperature);
  return seasonal ? seasonal.component : <span>Unseasonable weather!</span>;
}

这允许您的render方法进行查找：

const Component = getComponent(this.props.temp);

return (
  <Component />
);

ReactJS-如何动态更改html标记？

1 个答案: