Question

我有一个名为“ Badge”的React组件，它返回一些以粗体显示的Text。

render() {
 return (
  <div>
   <Text weight={'bold'}>
    {this.props.label}
   </Text>
  </div>
)

现在，我在另一个名为“卡片”的组件中使用“徽章”。

由于在Badge组件中，所有Text的样式均为粗体，所以整个句子也为粗体：

return (
 <div>
  <Badge lable={'This part of the sentence is ' + 'normal font style' + ' and the rest is bold.'}></Badge>
 </div>
)

现在，我想为该元素中的项目设置不同的样式：我想从“常规字体样式”中删除粗体样式-仅适用于字符串的这一部分。我已经尝试过这种方法，但是不起作用：

<Badge label={'This part of the sentence is ' + <span class=”normalText”>'normal font style'</span> + ' and the rest is bold.'}></Badge>

作为一个绝对的初学者，这个问题使我发疯。有什么想法可以解决这个问题吗？

Answer 1

如果要通过text标签传递html，则必须以html格式传递所有文本/标签。检查以下代码。

import React, { Component } from 'react';
import ReactDOM,{ render } from 'react-dom';
import Badge from './Badge';
import './style.css';

class App extends React.Component {
  render() {
    return (
      <div>       
       <Badge label="test" /><br/>
       <Badge label={'This part of the sentence is ' + 'normal font style' + ' and the rest is bold.'} /><br/>
       <Badge label={<>
          <span>This part of the sentence is</span> <span className="normalText">'normal font style'</span> <span> and the rest is bold.</span> 
        </>}
       />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

我为您制作了一个小型演示。
https://stackblitz.com/edit/react-rvuqv6

希望这对您有用！

Answer 2

更合适的系统是将标签值作为徽章的子级。像下面的示例一样声明Badge组件代码：

const Badge = props => {
    return (
       <div className={`badge-class`}>
          <Text weight={'bold'}>
              {props.children}
          </Text>
       </div>
    )
}

现在调用这样的组件

return (
   <div>
      <Badge>
          This part of the sentence is <span className={`normal-texts`}>normal font style</span> and the rest is bold.
      </Badge>
   </div>
)

与此相关，您可以在Badge组件，文本，图像等上传递任何类型的子代。

React组件和CSS：同一元素中的样式项不同

2 个答案: