小编Aiw*_*tko的帖子

我有一个短文本，后面是一个宽度有限的容器中的 SVG。预期的行为是，如果文本比容器宽度长，则文本会中断，但我希望它不会在文本和 svg 之间中断：

当前结果：

预期结果：

在文本中间（蓝色之前）添加一个<nobr>或一个<span>标签并在 SVG 之后关闭它不是一种选择，因为文本来自外部数据库并且无法编辑。

<span class="text">
    Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg">
    <svg>
    ....
    </svg>
</span>

我想在地图上添加自定义标记。我正在使用mapbox gl脚本。

我发现与此主题相关的唯一文档是https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/。

我尝试自定义给定的示例，并设法添加了一个标记并对其进行了一些修改，以更改其大小，但是由于我不了解所有参数，因此我不知道如何添加自己的标记。有没有更详细的文档？

这是我的代码：

 <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWl3YXRrbyIsImEiOiJjaXBncnI5ejgwMDE0dmJucTA5aDRrb2wzIn0.B2zm8WB9M_qiS1tNESWslg';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/aiwatko/cipo0wkip002ddfm1tp395va4', //stylesheet location
        center: [7.449932,46.948856], // starting position
        zoom: 14.3, // starting zoom
        interactive: true
    });       

    map.on('load', function () {
    map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [7.4368330, 46.9516040]
                },
                "properties": {
                    "title": "Duotones",
                    "marker-symbol": "marker",

                }
            }]
        }
    });

    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": …

我将我的 Home 组件包装在以下布局中：

export const DataContext = React.createContext({});

const Layout: React.FunctionComponent = (props) => {
  const data = {title: "abc", description: "def"};
  
  return (
    <DataContext.Provider value={data}>
        {props.children}
    </DataContext.Provider>
  );
};

我想在我的 Home 组件中使用 useContext 钩子，但它返回一个空对象：

const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
       // content data goes here
    </Layout>
  );
};

我怀疑这是因为我在包含上下文提供程序的 Layout 包装器之外定义了上下文变量，所以它回退到我定义的上下文的默认值（一个空对象）。但是，即使我在布局提供程序中控制台记录 useContext 钩子，它也会返回一个空对象：

const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
      {console.log(React.useContext(DataContext))}
    </Layout>
  );
}; …

我正在尝试根据输入字段值（react js 中的受控组件）设置状态，但是一旦我尝试更改输入字段的值，该事件总是会导致未定义。

应用程序.js

initialState = {
        set: {
            team1Score: 5,
            team2Score: 6,
        },
    };

handleChange(e) {
        this.setState({
            set: {
                team1Score: e.target.value,
                team2Score: e.target.value,
            }
        });
    }

render() {
return (
   <Match   
       set = {this.state.set}               
       handleChange={(e) => {this.handleChange()}}>
)}

匹配.js

<ScoreInput
  handleChange={props.handleChange}
  set={props.set}
/>

分数输入.js

const ScoreInput = (props) =>

    <div className="c-set-input">
        <input
            className="c-set-input__field"
            placeholder="0"
            value={props.set.team1Score}
            onChange={props.handleChange}
        ></input>
        <span>:</span>
        <input
            className="c-set-input__field"
            placeholder="0"
            value={props.set.team2Score}
            onChange={props.handleChange}
        ></input>
    </div>