Question

我有一个名为>>> m = re.search('(\S+)\s+(\S*)\s+(\S+)',my_string_another).groups() >>> m = [i if i else 'NA' for i in m] >>> m ['Aman', 'NA', 'India']的组件，当前正在使用RUN curl -fsSLO https://get.docker.com/builds/Linux/x86_64/docker-17.04.0-ce.tgz \ && tar xzvf docker-17.04.0-ce.tgz \ && mv docker/docker /usr/local/bin \ && rm -r docker docker-17.04.0-ce.tgz来避免行在太长的时候换行。

这是我到目前为止所做的：

Row

text-overflow: ellipsis

我的下一个想法是，我需要等到孩子们被渲染到DOM，然后添加<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> <h1>Hover over the rows below</h1> <div id="content"></div>事件来检索文本节点......但这看起来有点过分。

如何将子项的内容作为文本节点获取并显示为工具提示？

Answer 1

我认为您可以通过检查.map中的每个子元素来解决此问题，如果它是一个对象抓取props.children并将其转换为字符串。

要使这项工作适用于深层嵌套的HTML，您需要进行递归。对元素是什么（当它不是字符串）的一些额外检查也将是好的。

＆＃13;

function Row(props) {
    const { show=true, children } = props;
    
    const style = {
        display: show ? 'block' : 'none',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    };
    
    const title = React.Children
      .map(children, c => {
        if (typeof c === 'string') {
          return c.toString()
        } else {
          return c.props.children.toString();
        }

      }) // wat do?
      .join(' ');
      
    return (<div style={style} title={title}>{children}</div>);
}

const el = document.querySelector('#content');

const component = (<div style={{width:'200px'}}>
  <Row>This is the first one works and is very long.</Row>
  <Row>The second one works too.</Row>
  <Row>But <b>bold</b> children do <b>not</b> work properly.</Row>
  <Row show={false}>A hidden row.</Row>
</div>);

ReactDOM.render(component, el);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>

<h1>Hover over the rows below</h1>
<div id="content"></div>

＆＃13;

使用React显示基于子内容（innerHTML）的工具提示

1 个答案: