代码之家 › 专栏 › 技术社区 › Anna

react jsx-以粗体显示子字符串

reactjs javascript

Anna · 技术社区 · 6 年前

在创建自定义自动完成组件时,我遇到了这个问题:我得到了一个字符串和子字符串(字符串的第一部分,用户在自动完成字段中输入的字符串),我需要在结果列表中用粗体显示该部分。

但我不能用 str.replace 喜欢

    var re = new RegExp(find, 'g');
    return str.replace(re, '<b>'+find+'</b>');

因为它将返回字符串,我需要jsx。

所以基本上问题是-我有jsx,我需要做一些粗体的部分。我需要一个带jsx和类似inject的函数 <b> 在特殊的地方贴上标签

这就是我到目前为止得到的

    boldJSX(str, find){
        if(!find) return str;
        return <span><b>{find}</b>{str.slice(find.length)}</span>
    }

1 回复 | 直到 6 年前

nextt1 6 年前

首先,如果在给定列表中退出,则需要找到并提取适当的子字符串(您正在寻找的字符串),并通过提取如下所示的子字符串来生成自定义字符串。

 //autoValue - value you are looking for
 //main - item value
 const val =
  main.slice(0, main.indexOf(autoValue)) +
  "<b>" +
  autoValue +
  "</b>" +
  main.slice(
    main.indexOf(autoValue) + autoValue.length,
    main.length
  );

现在,你必须使用 dangerouslySetInnerHTML 为了一个 span 或任何习俗 HTML 用于呈现自动完成组件中每个项的组件。这是一个完整的例子。

const items = [
 "React",
 "Angular",
 "Vue",
 "Node",
 "Express",
 "PHP",
 "Laravel",
 "Material",
 "CSS",
 "HTML"
];

function ListItem(props) {
 if (props.value.indexOf(props.autoValue) > -1 && props.autoValue.length > 0) {
 const main = props.value;
 const val =
  main.slice(0, main.indexOf(props.autoValue)) +
  "<b>" +
  props.autoValue +
  "</b>" +
  main.slice(
    main.indexOf(props.autoValue) + props.autoValue.length,
    main.length
  );

 return (
  <div>
    <span dangerouslySetInnerHTML={{ __html: val }} />
    <hr />
  </div>
);
} else {
return (
  <span>
    {props.value}
    <hr />
  </span>
 );
 }
}

function NumberList(props) {
 const numbers = props.numbers;
 const listItems = numbers.map(number => (
  <ListItem
   key={number.toString()}
   value={number}
   autoValue={props.autoValue}
  />
 ));
 return <div>{listItems}</div>;
}

class App extends Component {
 constructor(props) {
 super(props);
 this.state = {
   inputValue: ""
 };

 this.update = this.update.bind(this);
}

update(e) {
 e.preventDefault();
 this.setState({ inputValue: e.target.value });
}

render() {
 return (
   <div>
     <input
       type="text"
       onChange={this.update}
       name="inputValue"
       value={this.state.inputValue}
     />
     <NumberList numbers={items} autoValue={this.state.inputValue} />
     <span> {this.state.inputValue} </span>
   </div>
 );
 }
 } 

export default App;

工作榜样。 https://codesandbox.io/s/n9n65wqj5j

Mantas GiniÅ«nas 5 年前

我似乎已经找到了一种更“反应”的方法来对付那些将来来这里的人。

function BoldedText({ text, shouldBeBold }) {
  const textArray = text.split(shouldBeBold);
  return (
    <span>
      {textArray.map((item, index) => (
        <>
          {item}
          {index !== textArray.length - 1 && (
            <b>{shouldBeBold}</b>
          )}
        </>
      ))}
    </span>

)(二) }

Maria 5 年前

假设您已经知道传入的建议与您可以执行的筛选匹配

getSuggestionText = (suggestion, filter) => (
  <span>
    <b>{suggestion.slice(0, filter.length}</b>
    {suggestion.slice(filter.length)}
  </span>
);